Bootstrap 3-两列布局 - 摆脱占位符

Question

我正在尝试使用bootstrap 3创建表单这个。

我可以使它看起来非常相似，但是我唯一的问题是我在ETO部分中的最后一个水平规则遍历了整个过程。有什么办法可以使它只能跨越页面的一半？我尝试将其放在其中的不同尺寸中，但我无法正常工作。这是我的HTML。提前感谢！

<div class="panel panel-default">
    <div class="panel-heading">
      <label style="color: white; font-weight: bold;">JOHNSON Summary</label>
    </div>
  <div class="panel-body">
    <form class="form-horizontal" role="form" style="overflow-x:auto;">
      <fieldset>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> Status </label>
            <div class="col-xs-7">
              <select class="form-control" id="empStatus">
                <option value="" disabled>Choose Type....</option>
                <option value="Current">Current</option>
                <option value="Terminated">Terminated</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> Anniversary </label>
            <div class="col-xs-7">
              <input class='form-control' type="text" id="empAnniversary"/>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> Start Date </label>
            <div class="col-xs-7">
              <input class='form-control' type="date" id="empStartDate"/>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> Adjusted Start </label>
            <div class="col-xs-7">
              <input class='form-control' type="date" id="empAdjustedStart"/>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> STD/LTD </label>
            <div class="col-xs-7">
              <input class='form-control' type="text" id="empSTDLTD"/>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-5"> Uncharged </label>
            <div class="col-xs-7">
              <input class='form-control' type="text" id="empUncharged"/>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <h4>PTO</h4>
        <div class="col-xs-12">
          <div class="form-group">
            <div class="col-xs-1"></div>
            <label class="col-xs-2"> Base </label>
            <div class="col-xs-3">
              <input class='form-control' type="text" id="ptoBase" />
            </div>
            <div class="col-xs-6">
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-2" style="font-weight: bold;"> &#43; </label>
            <label class="col-xs-4"> Carryover </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoCarryover" />
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <div class="col-xs-1"></div>
            <label class="col-xs-4"> Balance </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoBalance" />
            </div>
            <div class="col-xs-1"></div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-2" style="font-weight: bold;"> &#8213; </label>
            <label class="col-xs-4"> Borrowed </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoBorrowed" />
            </div>
          </div>
          <hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-1" style="font-weight: bold;"> &#8213; </label>
            <label class="col-xs-4"> Requests </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoRequests" />
            </div>
            <div class="col-xs-1"></div>
          </div>
          <hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-2" style="font-weight: bold;"> &#61; </label>
            <label class="col-xs-4"> Balance </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoBalance" />
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group">
            <label class="col-xs-1" style="font-weight: bold;"> &#61; </label>
            <label class="col-xs-4"> Available </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoAvailable" />
            </div>
            <div class="col-xs-1"></div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <h4>ETO</h4>
        <div class="col-xs-12">
          <div class="form-group">
            <div class="col-xs-1"></div>
            <label class="col-xs-2"> Earned </label>
            <div class="col-xs-3">
              <input class='form-control' type="text" id="etoEarned" />
            </div>
            <div class="col-xs-6">
            </div>
          </div>
        </div>
        <div class="col-xs-12">
          <div class="form-group">
            <label class="col-xs-1"> &#8213; </label>
            <label class="col-xs-2"> Requests </label>
            <div class="col-xs-3">
              <input class='form-control' type="text" id="etoRequested" />
            </div>
            <div class="col-xs-6">
            </div>
          </div>
          <hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
        </div>
        <div class="col-xs-12">
          <div class="form-group">
            <label class="col-xs-1"> &#61; </label>
            <label class="col-xs-2"> Available </label>
            <div class="col-xs-3">
              <input class='form-control' type="text" id="etoAvailable" />
            </div>
            <div class="col-xs-6">
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Answer 1

更新。
我认为您需要如官方文档中所述使用Bootstrap的水平形式。看来您正在使用水平形式结构，但是您忘记了将.form-horizontal类添加到form元素或.form-group。