Bootstrap：使按鈕寬度爲33％，當窗口太小時100％

Question

我有三個按鈕，我希望它們在同一條線上，佔用所有空間，每個按鈕必須具有相同的大小。
只要窗口太小而不能顯示至少170px寬度的每個按鈕，我希望每個按鈕都有自己的線條並佔據它的100％。
我記得看到網站有哪些有點像這樣工作的導航欄..

這是我的代碼目前的樣子：

 <div class="modal-body"> 
      <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span> 
      <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span> 
      <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button> 
     </div> 

第一部分看起來工作正常，但是當窗口得到過小，按鍵不要拿自己的線100％的寬度：

有一個引導的方式來實現這一目標？或者是一個CSS的必要？

Answer 1

如果您使用的引導，那麼你應該能夠使用「關口」 CSS選擇器

你應該能夠應用容器（或行），取決於有多少要填充屏幕的類，然後將'col-md-4 col-sm-12'（取決於你希望它的斷點100％）應用於所有按鈕，不應該像上面的例子那樣使用引導類來嵌入CSS內聯。

鏈接引導文件http://getbootstrap.com/

Answer 2

您將需要一個媒體查詢添加到CSS

button{ 
    width: 170px 
} 
@media (max-width: 540px){ 
    button{ 
     width: 100%; 
    } 
} 

爲了達到最佳效果父類中添加按鈕

Answer 3

我會重寫HTML看起來像這樣。

<div class="modal-body"> 
    <div class="row"> 
     <div class="col-lg-4 col-sm-12"> 
      <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button> 
     </div> 
     <div class="col-lg-4 col-sm-12"> 
      <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button> 
     </div> 
     <div class="col-lg-4 col-sm-12"> 
      <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button> 
     </div> 
    </div>  
</div> 

Answer 4

請參閱引導網格系統文檔來了解更多關於不同尺寸山口設置。

http://getbootstrap.com/css/#grid