Bootstrap 内联形式和装订线宽度答案

【问题标题】：Bootstrap inline form and gutter widthBootstrap 内联形式和装订线宽度
【发布时间】：2014-02-14 17:04:03
【问题描述】：

我正在尝试使我的表单内联，并尝试减少表单中元素之间的装订线宽度。最好的方法是什么？

这是我的jsfiddle 代码和下面的示例。

<form class="form-inline" role="form">
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder="Put something here">
  </div>

  <div class="col-lg-3">
      <select class="form-control dropdown">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3t</option>
    </select>
  </div>

  <div class="col-lg-3">
    <select class="form-control dropdown">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      </select>
  </div>

  <div class="col-lg-3">
    <button type="submit" class="btn btn-default">submit</button>
  </div>

</form>

【问题讨论】：

标签： css html forms twitter-bootstrap-3

【解决方案1】：

您的 JSFiddle 未正确包含 Bootstrap 3。试试 Bootply.com

这是我做的例子，似乎工作正常http://bootply.com/108144#

就我在docs 中看到的而言，内联表单中的元素需要包装在class="form-group" 中。

<form class="form-inline" role="form">
          <div class="form-group">
            <select class="form-control">
              <option>Group 1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option>Group 2</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
          <button type="submit" class="btn btn-default">Sign in</button>
        </form>

【讨论】：