Twitter Bootstrap文本框大小限制

Question

我正在使用bootstrap文本框：

<div class="row">
   <div class="col-lg-4">
      <p>
         <label>Contact List</label>
          <select class="form-control" id="list" name="list">
             <option value="">Please Select</option>
          </select>
      </p>
   </div>
   <div class="col-lg-10">
      <p>
        <input class="form-control" id="contact_id" maxlength="3" size="4" name="contact_id">
         <button type="button" class="btn btn-primary" id="load_contact">Load Contact</button>
     </p>
 </div>

我想在下拉列表的右侧对齐文本框和按钮，但目前文本框已在整个页面中对齐。

以下是截图：

Answer 1

请将col-lg-10更改为col-lg-8

Answer 2

Bootstrap使用 12列的行 ...

你有（对于大视图：col-lg）14列（col-lg-4 + col-lg-10）

所以只需将其修改为总和为12 （4 + 8）（我改为col-xs，因为它看起来很小）

<div class="row">
   <div class="col-xs-4">
      <p>
         <label>Contact List</label>
          <select class="form-control" id="list" name="list">
             <option value="">Please Select</option>
          </select>
      </p>
   </div>
   <div class="col-xs-8">
      <p>
        <input class="form-control" id="contact_id" maxlength="3" size="4" name="contact_id">
         <button type="button" class="btn btn-primary" id="load_contact">Load Contact</button>
     </p>
 </div>

这是fiddle