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#

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

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

Bootstrap内联形式和装订线宽度

1 个答案: