css - Bootstrap 内联表单和间距宽度

Question

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

这是我的 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>

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