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

Question

我正在尝试使用 bootstrap 3 创建一个看起来像 this.

我可以让它看起来非常相似，但我遇到的唯一问题是我在 ETO 部分中的最后一条水平规则贯穿了整个过程。有什么办法可以让它只跨越一半的页面吗？我试着把它放在里面不同的 col 尺寸，但我无法让它工作。这是我的 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 的 horizontal form as described in official docs .您似乎正在使用水平表单结构，但您忘记将 .form-horizo​​ntal 类添加到您的 form 元素或 .form-group.