即使我在引导程序中使用col-lg-6，我怎样才能使表单控件内联？

Question

我在这里准备了小提琴：http://jsfiddle.net/7yd5o63q/16/

正如您所看到的（点击＆＃34;随机＆＃34;）后，所有控制器都是彼此相同的。但是，当我删除前两行时：

<div class="col-lg-6">
<form role="form">

然后里面的表格是内联的 - 这是我的目标。但是，我还有一些其他的控制器，我没有包含在小提琴中，所以我不想删除这两行。有没有办法在到达这部分代码之前重新设置布局：

<div class="panel-body">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li><a href="#random" data-toggle="tab">Random</a>
        </li>
    </ul>
(...)

这样只有这个元素是内联的而其余元素不会？

Answer 1

以下是两个选项，具体取决于您计划如何处理移动视口。

另外，我建议不要直接更改Bootstrap默认规则，因为它会全局改变整个布局。

.form-inline-new .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle
}
.form-inline-new .form-control-static {
  display: inline-block
}
.form-inline-new .input-group {
  display: inline-table;
  vertical-align: middle
}
.form-inline-new .input-group .input-group-addon,
.form-inline-new .input-group .input-group-btn,
.form-inline-new .input-group .form-control {
  width: auto
}
.form-inline-new .input-group>.form-control {
  width: 100%
}
.form-inline-new .control-label {
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .radio,
.form-inline-new .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .radio label,
.form-inline .checkbox label {
  padding-left: 0
}
.form-inline-new .radio input[type=radio],
.form-inline-new .checkbox input[type=checkbox] {
  position: relative;
  margin-left: 0
}
.form-inline-new .has-feedback .form-control-feedback {
  top: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-lg-6">
    <div class="row">
      <div class="panel-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
          <li><a href="#random" data-toggle="tab">Random</a>

          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane fade" id="random">
            <p>
              <form id="MyForm" class="form-inline-new" role="form">
                <div class="form-group">
                  <label>first</label>
                  <select class="form-control ">
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                  </select>
                  <label>every</label>
                  <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                  <label>for</label>
                  <select class="form-control">
                    <option>3 days</option>
                    <option>4 days</option>
                    <option>5 days</option>
                    <option>6 days</option>
                    <option>7 days</option>
                    <option>8 days</option>
                    <option>9 days</option>
                    <option>10 days</option>
                    <option>11 days</option>
                    <option>12 days</option>
                    <option>13 days</option>
                    <option>14 days</option>
                  </select>
                </div>
              </form>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="col-lg-6">
    <div class="row">
      <div class="panel-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
          <li><a href="#random2" data-toggle="tab">Random Original</a>

          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane fade" id="random2">
            <p>
              <form id="MyForm" class="form-inline" role="form">
                <div class="form-group">
                  <label>first</label>
                  <select class="form-control ">
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                  </select>
                  <label>every</label>
                  <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                  <label>for</label>
                  <select class="form-control">
                    <option>3 days</option>
                    <option>4 days</option>
                    <option>5 days</option>
                    <option>6 days</option>
                    <option>7 days</option>
                    <option>8 days</option>
                    <option>9 days</option>
                    <option>10 days</option>
                    <option>11 days</option>
                    <option>12 days</option>
                    <option>13 days</option>
                    <option>14 days</option>
                  </select>
                </div>
              </form>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>