Bootstrap的引用樣式

通過設(shè)置 display: inline-block; 并添加少量的內(nèi)補（padding），將所有元素放置于同一行。


語法：

<ul class="list-inline">
  <li>…</li> 
</ul>

案例：

<ul class="list-inline"> 
      <li>Lorem ipsum</li> 
      <li>Phasellus iaculis</li> 
  &n
bsp;   <li>Nulla volutpat</li> </ul> 

運行結(jié)果：

---

// 源碼1927行
@media (min-width: 768px) {  /* 大于768像素的瀏覽器才生效*/
  .form-inline .form-group {
    display: inline-block;  /* 內(nèi)聯(lián)樣式顯示*/
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
  /* 內(nèi)聯(lián)樣式顯示,但由于form-control樣式設(shè)置了100%的寬度,所以沒什么用*/
    width: auto;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;  /* 確保上下居中*/
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    float: none;  /* 不使用浮動定位*/
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {    top: 0;  }
}

要注意，由于默認(rèn)的樣式為.form-control，且其input、select和textarea的寬度都是100%，所以在使用內(nèi)聯(lián)表單的時候是無效的，需要對這些控件元素單獨設(shè)置寬度width，或者外面再加上一層帶有.form-group樣式的div元素。示例如下：

<form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="請輸入你的用戶名">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="請輸入你的密碼">
        </div>
        <div class="checkbox">
            <label><input type="checkbox">記住密碼</label>
        </div>
        <button type="submit" class="btn btn-default">登錄</button>
    </form>

但這種情況下，如果再設(shè)置一個label的話，input又換行了。所以如果非要label的話，那就只能在input所在div元素的上邊再加一個div元素用于包含label標(biāo)簽。比如：

 <div class="form-group">
        <label>用戶名:</label>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="請輸入你的用戶名">
    </div>

注意
如果沒有為每個輸入控件設(shè)置label，屏幕閱讀器將無法正確識別。對于這種內(nèi)聯(lián)表單，可以通過為label設(shè)置.sr-only樣式將其隱藏。比如：

<div class="form-group">
   <label class="sr-only" for="account">登錄用戶名</label>
   <input type="text" class="form-control" id="account" placeholder="請輸入你的用戶名">
</div>