web-dev-qa-db-ja.com

ブートストラップ付き固定幅ボタン

ブートストラップは固定幅のボタンをサポートしますか？現在、「保存」と「ダウンロード」の2つのボタンがある場合、ボタンのサイズは内容に基づいて変わります。

Bootstrapを拡張する正しい方法は何ですか？

csscss3twitter-bootstrap
154
aWebDeveloper

ボタンに.btn-blockクラスを使用して、親の幅に拡大することもできます。

親が固定幅要素の場合、ボタンはすべての幅になるように拡大されます。既存のマークアップをコンテナーに適用して、固定/流動ボタンが必要なスペースだけを占めるようにすることができます。

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>
279
Kami

これを行うには、両方のボタンで問題ないと思われる幅を設定してから、その幅のカスタムクラスを作成してボタンに追加します。

CSS

.custom {
    width: 78px !important;
}

その後、このクラスを使用してボタンに追加します。

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

デモ： http://jsfiddle.net/yNsxU/

作成したカスタムクラスを自分のスタイルシート内に配置して、ブートストラップスタイルシートの後に読み込むことができます。これは、フレームワークを更新すると、ブートストラップスタイルシート内に加えた変更が誤って失われる可能性があるためです。また、変更はデフォルト値よりも優先されるようにします。

58
Andres Ilich

ボタンをクラス "btn-group"のdivの中に置くと、中のボタンは最大のボタンと同じサイズになります。

例えば：

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ブートストラップボタングループ

34
kravits88

ボタンには、最小幅と最大幅を指定して、これらの特別なクラスのボタン用に別のCSSセレクタを作成できます。ボタンが

<button class="save_button">Save</button>

あなたのBootstrap CSSファイルでは、次のようなものを作成することができます。

.save_button {
    min-width: 80px;
    max-width: 80px;
}

このようにすれば、レスポンシブデザインであっても常に80pxに留まるはずです。

Bootstrapを拡張する正しい方法に関する限り、このスレッドを見てください。

ブートストラップの拡張

12
Marc

BS 4では、 サイズ変更 を使用して、ボタンが親コンテナの全幅を占めるようにw-100を適用することもできます。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>
2
Prakash G. R.

@ kravits88の回答を拡大する：

これはボタンを全幅に合うように引き伸ばします。

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>
2
Bhojendra Rauniyar

親コンテナがレスポンシブである場合、ブロック幅のボタンはレスポンシブボタンになります。 ！の代わりに固定幅とより詳細なセレクタパスの組み合わせを使用することが重要だと思います。

1）それはハックではありません（min-widthとmax-widthを同じ設定にしてもハッキーです）

2）悪い習慣である！importantタグを使用しない

3）widthを使うので読みやすくなり、CSSでカスケードがどのように機能するのかを理解している人なら誰にでもわかります（おそらくCSSのコメントを残してください）

4）精度を高めるために、ターゲットノードに適用するセレクタを組み合わせます。

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}
1
Alpha G33k

同じ必要性に遭遇したばかりで、固定幅を定義することに満足していませんでした。

それでjqueryでそれをしました：

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>
0
Andres Velasco Garcia

ここでは、button-group要素内のボタンを比較することによって解決策を見つけました。簡単な解決策は、最大の幅を持つものを取得し、他のボタンに幅を設定することです。それで、それらは等しい幅を持つことができます。

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

それは魅力のように働きました。

0
sulhadin

btn-group-justifiedおよびbtn-groupは静的コンテンツに対してのみ機能し、動的に作成されたボタンに対しては機能しません。また、CSSでof buttonを使用して固定することは、すべてのコンテンツが短い場合でも同じ幅に留まるため実用的ではありません。

私の解決策：ボタンのグループに同じクラスを入れて、そしてそれらのすべてにループして、最も長いボタンの幅を得て、それをすべてに適用します

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Sample output here

0
Dards

あなたの問題を解決する最善の方法は、希望の列幅を持つボタンブロックbtn-blockを使うことです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>
0
A Sonik