如何在同一個div中的兩個按鈕之間創建空間？

108

水平放置Bootstrap按鈕的最佳方式是什麼？如何在同一個div中的兩個按鈕之間創建空間？

目前的按鈕是感人：

<div class="btn-group"> 
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> 
     <i class="icon-in-button"></i> 
     Add to list 
     <span class="caret"/> 
    </button> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="#">here</a> 
     </li> 
     <li> 
      <a href="#">new</a> 
     </li> 
    </ul> 
    <button class="btn btn-info"> 
     <i class="icon-in-button"></i> 
     more 
    </button> 
</div>

的jsfiddle顯示問題：http://jsfiddle.net/hhimanshu/sYLRq/4/

來源

2012-06-26 daydreamer

我有同樣的問題，並最終將邊緣的buttons- MR-1的一個。 – Ananth

231

把它們放在裏面btn-toolbar或其它容器，就不會btn-group。 btn-group將它們連接在一起。有關Bootstrap documentation的更多信息。

編輯：最初的問題是Bootstrap 2.x，但它仍然有效爲Bootstrap 3和Bootstrap 4。

來源

2012-06-26 22:10:34

我多年前就在找這個問題的解決方案，爲什麼我以前沒有找到你，你是我的英雄 –

多麼直接的答案！我當天的英雄:) – Naga

'btn-toolbar'可能會把一些按鈕換成新的一行。如何避免這種情況？ – lukas84

我實際遇到了同樣的需求。我簡單地使用像這樣的CSS覆蓋

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

來源

2014-01-29 02:57:19

他需要利潤 – ymakux

在大多數情況下最簡單的方法是保證金。

在這裏你可以這樣做：

button{ 
    margin: 13px 12px 12px 10px; 
}

button{ 
    margin: 13px; 
}

來源

2015-10-05 19:03:47 Gammer

只要把按鈕一類（級= 「BTN-工具欄」）作爲被告訴兄弟米羅斯拉夫Popovic.It工作真棒。

<div class="btn-toolbar"> 
 
    <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button> 
 
    <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button> 
 
</div>

來源

2015-10-24 07:12:12 Manmohan

您可以使用spacing for Bootstrap，且無需任何額外的CSS。只需將這些類添加到您的按鈕。這是版本4

來源

2017-09-28 13:21:22

如果使用引導程序，您就可以使用樣式改變：如果你想只在一個頁面，然後愨頭標記添加.btn組BTN {保證金右：1rem;}

如果是所有的網站添加到CSS文件

來源

2018-02-11 15:56:20

你應該使用自舉第4節

<div class="form-group row"> 
    <div class=col-md-6> 
    <input type="button" class="btn form-control" id="btn1"> 
    </div> 
    <div class=col-md-6> 
    <input type="button" class="btn form-control" id="btn2"> 
    </div> 
    </div>

來源

2018-02-11 16:04:26

如何在同一個div中的兩個按鈕之間創建空間？

回答

相關問題