如何在BootstrapCSS中的按鈕之前和之後放置文本

我使用Bootstrap並嘗試將某些文本放在與按鈕相同的行上。我需要在按鈕之前顯示一些文字，以及之後的其他文字。這是我有：如何在BootstrapCSS中的按鈕之前和之後放置文本

<div class="input-group"> 
    Match 
    <div class="input-group-btn" id="drop_operator_list"> 
     <div class="btn-group btn-group-xs"> 
     <div class="dropdown"> 
      <button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#"> 
       <span class="caret"></span></button> 
       <ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;"> 
        <li><a href="#" id="AND">AND</a></li> 
        <li><a href="#" id="OR">OR</a></li> 
       </ul> 
       </div> 
      </div> 
      </div> 
      Everything 
     </div>

雖然以上所說的一切在同一行中，之前和之後的字符串添加空格，並將其顯示在附件：

來源

2016-05-18 user1919

你有沒有考慮使用''的財產content' :: before'和'::後'僞元素？ – TylerH

謝謝。這意味着我必須在CSS中添加規則。我想知道是否有非CSS解決方案。 – user1919

*「非CSS」*解決方案會是什麼樣子？你建議使用HTML解決方案嗎？另外，爲什麼標籤CSS，如果你不想要一個CSS解決方案？ –

這裏有一個辦法只需添加一組div標籤並在輸入組之外移動單詞即可實現。和一個Bootply。

<div class="form-inline"> 
    Match 
    <div class="input-group"> 
     <div class="input-group-btn" id="drop_operator_list"> 
      <div class="btn-group btn-group-xs"> 
      <div class="dropdown"> 
       <button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#"> 
        <span class="caret"></span></button> 
        <ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;"> 
         <li><a href="#" id="AND">AND</a></li> 
         <li><a href="#" id="OR">OR</a></li> 
        </ul> 
        </div> 
       </div> 
       </div> 
     </div> 
    Everything 
    </div>

正如所建議的，添加此CSS將抵消在的768px中斷。

.form-inline .input-group { 
    display: inline-table; vertical-align: middle; 
} 

.form-inline .input-group .input-group-btn { 
    width: auto; 
}

來源

2016-05-18 14:40:22

謝謝。但這實際上不起作用，因爲它不會將它們內聯，而是位於按鈕之上和之下。 – user1919

@dkar嗯。你看過Bootply嗎？它在這些範圍內正常工作。如果它不適合你，那麼你不使用'.form-inline'或者你的項目中的其他東西正在影響它。 –

當屏幕寬度小於768px時，Bootstrap看起來有所不同 –

您需要設置一些屬性爲.input-group和.input-group-btn：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.input-group { 
 
    display: inline-table; 
 
    vertical-align: middle; 
 
} 
 
.input-group .input-group-btn { 
 
    width: auto; 
 
}

<div class="input-group"> 
 
    Match 
 
    <div class="input-group-btn" id="drop_operator_list"> 
 
    <div class="btn-group btn-group-xs"> 
 
     <div class="dropdown"> 
 
     <button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#"> 
 
      <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;"> 
 
      <li><a href="#" id="AND">AND</a> 
 
      </li> 
 
      <li><a href="#" id="OR">OR</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    Everything 
 
</div>

來源

2016-05-18 15:16:02

如何在BootstrapCSS中的按鈕之前和之後放置文本

回答

相關問題