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 ) =26=]

<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

Twitter Bootstrap 文本框大小限制

Twitter Bootstrap textboxes size limit

html

css

textbox

twitter-bootstrap