Question

我使用Bootstrap并尝试使用按钮在同一行放置一些文本。我需要在按钮之前显示一些单词，之后再显示其他一些单词。这就是我所拥有的：

<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

这是一种实现它的方法，只需添加一组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将抵消.form-inline的768px的突破。

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

如何在BootstrapCSS中的按钮之前和之后放置文本

2 个答案: