BootstrapCSSのボタンの前後にテキストを配置する方法

Question

私はブートストラップを使用し、ボタンを使って同じ行にテキストを配置しようとしています。ボタンの直前に表示される言葉が必要です。 これは私が持っているものです。

<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> 

上記と同じ行にすべてを置くが、それは、文字列の前後に空白を追加し、添付ファイルのようにそれらを示しています。ここ

Answer 1

への道ですもう1組の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> 

としては.form-inlineの768pxの破壊に対抗します。このCSSを追加し、提案しました。

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

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

Answer 2

あなたが.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>