2016-12-21 11 views
1
<div class="container"> 
<div class="btn-group-vertical"> 
<a href="3overview.php" class="btn btn-primary">Overview</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<br> 
<a href="" class="btn btn-warning">Button</a> 
<a href="" class="btn btn-danger">Button</a> 
</div> 
</div> 

私はこれらのボタンは、彼らがしているコンテナの全幅あり、それを作るためにしようとしていますが、私は私が持っている、それが仕事を得るように見えることはできません.btn-group-justifiedを試しましたが、.btn-group-verticalで何も動作しませんでした。助けてもらえますか?ブートストラップ全幅ボタン.btnグループ-垂直

EDIT 11/28/2017:回答をマークし、見つかったいくつかのタイプミスを修正しました。

答えて

4

btn-group-verticalの自動設定幅は、わかる範囲で85pxです。 100%に設定して、問題を修正します。スタイルシートで行われますが、下のインラインソリューションであるべきである。

<div class="container"> 
<div class="btn-group-vertical" style="width: 100%;"> 
<a href="3overview.php" class="btn btn-primary">Overview</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<br> 
<a href="" class="btn btn-warning">Button</a> 
<a href="" class="btn btn-danger">Button</a> 
</div> 
</div> 

EDIT:これは動作しますがVladsが代わりに答えると、私は行くだろう。それは私よりも優れています。そして、同様に動作します。ただし、個々のボタンにクラスを追加する必要はありません。クラスをボタングループに追加するだけで十分です。このように:

<div class="container"> 
    <div class="btn-group-vertical btn-block" style="width: 100%;"> 
     <a href="3overview.php" class="btn btn-primary">Overview</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <br> 
     <a href="" class="btn btn-warning">Button</a> 
     <a href="" class="btn btn-danger">Button</a> 
    </div> 
</div> 
0

ボタンを全幅にするには、ボタンにbtn-blockクラスを追加するだけです。これを見てください。Example

関連する問題