避免換行符引導按鈕組

我有一個引導按鈕組，其中包括按鍵之間的文本：避免換行符引導按鈕組

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <div class="btn btn-primary"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </div> 
 
       <div>2016</div> 
 
       <div class="btn btn-primary"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

如何避免換行，使得按鈕和文本排成一行？

來源

2016-11-20 Thomas W.

你需要在網上，以顯示他們像：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <div class="btn btn-primary" style="display: inline-block;"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </div> 
 
       <div style="display: inline-block;">2016</div> 
 
       <div class="btn btn-primary" style="display: inline-block;"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

編輯：Alternat此外，正如Turnip在他的回答中提出的那樣，您可以將元素從div s更改爲另一種自然顯示在內的元素。無論哪種方式，你都會達到同樣的結果。

來源

2016-11-20 19:20:00 SpencerD

div s是塊元素。將按鈕更改爲<a> s，將文本div更改爲<span>或任何其他內嵌/內嵌塊元素。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="btn-group"> 
 
       <a class="btn btn-primary"> 
 
        <i class="fa fa-chevron-left"></i> 
 
       </a> 
 
       <span>2016</span> 
 
       <a class="btn btn-primary"> 
 
        <i class="fa fa-chevron-right"></i> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-11-20 19:19:18 Turnip

謝謝，這裏工作正常。但是，當我複製和過去確切的解決方案代碼時，在我的應用程序中，數字「2016」與第二個按鈕對齊，而不是按鈕之間。任何想法，有什麼可以使差異？ –

使用您的瀏覽器開發工具來檢查包含「2016」的元素並查看應用的CSS。我猜想你的CSS中有'text-align：right'。或者，也許你有一個祖先的課文「正確的」？ – Turnip

其他答案中沒有提到的另一個選擇是，您可以將display包裝div的屬性（類別.btn-group）設置爲flex。它比內聯塊有一些優勢。例如，如果您的中心元素大於邊元素，則可以使用align-items: center對齊邊元素。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="btn-group" style="display: flex;"> 
       <div class="btn btn-primary"> 
        <i class="fa fa-chevron-left"></i> 
       </div> 
       <div>2016</div> 
       <div class="btn btn-primary"> 
        <i class="fa fa-chevron-right"></i> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-11-20 19:34:11

避免換行符引導按鈕組

回答

相關問題