206

Bootstrapは固定幅ボタンをサポートしていますか？現在、「保存」と「ダウンロード」の2つのボタンがある場合、ボタンのサイズはコンテンツに応じて変わります。

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

4

13 に答える 13

345

ボタンのクラスを使用し.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>

于 2012-09-21T09:28:22.643 に答える
77

これを行うには、両方のボタンに問題がないと思われる幅を考え出し、その幅でカスタムクラスを作成して、次のようにボタンに追加します。

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/

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

于 2012-06-15T12:17:05.023 に答える
44

クラス「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>

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

于 2014-03-13T06:34:11.873 に答える
13

ボタンについては、最小幅と最大幅が指定された特別なクラスのボタン用に別のCSSセレクターを作成できます。だからあなたのボタンが

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

Bootstrap CSSファイルで、次のようなものを作成できます

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

このように、レスポンシブデザインを使用している場合でも、常に80pxを維持する必要があります。

Bootstrapを拡張する正しい方法については、次のスレッドをご覧ください。

ブートストラップの拡張

于 2012-06-15T12:15:29.867 に答える
7

BS4およびBS5では、サイジングを使用し、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>

于 2018-01-15T16:16:28.687 に答える
4

btn-group-justifiedとbtn-groupは静的コンテンツに対してのみ機能し、動的に作成されたボタンには機能しません。また、cssのボタンの固定は、すべてのコンテンツが短くても同じ幅のままであるため、実用的ではありません。

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

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

ここに出力例

于 2018-12-27T22:11:23.240 に答える
3

@ 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>
于 2018-07-26T05:46:00.807 に答える
1

親コンテナがレスポンシブである場合、ブロック幅ボタンは簡単にレスポンシブボタンになる可能性があります。！importantの代わりに、固定幅とより詳細なセレクターパスの組み合わせを使用すると思います。理由は次のとおりです。

1）それはハックではありません（最小幅と最大幅を同じに設定することはハッキーです）

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

3）幅を使用しているので非常に読みやすく、CSSでカスケードがどのように機能するかを理解している人なら誰でも何が起こっているかを見ることができます（おそらくこれにCSSコメントを残しますか？）

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

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}
于 2015-07-10T13:43:50.690 に答える
1

ブートストラップ5+

グリッド列を使用して幅を設定し、マージン終了ユーティリティを使用してそれらの間にマージンを設定します。

<div>
  Here are two buttons: 
  <button class="btn btn-primary col-3 me-2">PressMe</button>
  <button class="btn btn-primary col-3">PressMeToo</button>
</div>
于 2021-10-20T22:22:38.563 に答える
0

ちょうど同じ必要性に出くわし、固定幅を定義することに満足していませんでした。

それで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>

于 2017-11-16T11:54:05.853 に答える
0

問題を解決する最善の方法は、希望する列幅 のボタンブロック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>

于 2018-09-18T10:55:59.240 に答える
0

ここで、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);
    });
}

それは魅力のように機能しました。

于 2018-11-13T11:14:47.153 に答える
-4

これはばかげた解決策かもしれませんが、私はこの問題の解決策を探していて、怠惰になりました。

とにかく、ボタンの代わりにinput class = "btn ..." ...を使用し、value =属性にスペースを埋めて、すべて同じ幅になるようにすると、かなりうまく機能します。

例：

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

私はそれほど長い間ブートストラップを使用していません、そして多分このアプローチを使用しない正当な理由があるかもしれません、しかし私が共有したほうがよいと思いました

于 2015-09-20T20:48:33.487 に答える