html - 如何对齐控制彼此

Question

我试图在不提供巨大空间的情况下将 html 控件彼此对齐，我尝试覆盖 bootstrap .css 但没有成功。

这是我的屏幕:

我已经创建了 JSFiddle，下面是我的 html 代码。

JSFIDDLE

<div class="row">
  <div class="col-xs-4">
    <div class="form-group1">
      <label class="col-xs-5 control-label" for="">Rows per page:</label>

      <div class="col-xs-4">
        <form action="/SystemAdmin" id="form_header_pager" method="post" name=
        "form_header_pager">
          <select class="form-control" data-val="true" data-val-number=
          "The field PageSize must be a number." data-val-required=
          "The PageSize field is required." id="PageSize" name=
          "PageSizeSelect">
            <option selected="selected" value="10">
              10
            </option>

            <option value="25">
              25
            </option>

            <option value="50">
              50
            </option>

            <option value="ALL">
              ALL
            </option>
          </select>
        </form>
      </div>
    </div>
  </div>

  <div class="col-xs-4">
    <div>
      <div>
        <b>Total records:</b> 0
      </div>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="form-group1">
      <label class="col-xs-5 control-label" for="">Show Records:</label>

      <div class="col-xs-7">
        <form action="/SystemAdmin" id="form_header_show_records" method="post"
        name="form_header_show_records">
          <select class="form-control" id="ShowRecords" name="showrecords">
            <option value="all">
              Show All Records
            </option>

            <option value="invalid">
              Show Invalid Records
            </option>

            <option value="valid">
              Show Valid Records
            </option>
          </select>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

布局中的大空间是由于使用网格列宽造成的。 Bootstrap 提供 inline form element styling并且建议使用它而不是网格列。

我必须进行的额外 CSS 调整是您的总计区域。由于它没有输入或选择元素，因此垂直对齐略有偏差。如果您有一行输入(如 Bootstrap 文档中所示)，则此处不需要任何额外的 CSS。

您可以在下面查看这个更正后的代码片段。 请注意，您必须以“全页”模式运行它才能正确查看。默认情况下，form-inline 工具仅适用于大于 768 像素的视口(viewport)。

.record-results {
    display: inline-block;
    margin-bottom: 3px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-inline">
    <div class="form-group">
        <form action="/SystemAdmin" id="form_header_pager" method="post" name="form_header_pager">
            <label for="PageSize">Rows per page:</label>
            <select class="form-control" data-val="true" data-val-number="The field PageSize must be a number." data-val-required="The PageSize field is required." id="PageSize" name="PageSizeSelect">
                <option selected="selected" value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="ALL">ALL</option>
            </select>
        </form>
    </div>
    <div class="form-group ">
        <span class="record-results"><strong>Total records:</strong> 0</span>
    </div>
    <div class="form-group">
        <form action="/SystemAdmin" id="form_header_show_records" method="post" name="form_header_show_records">
            <label for="showrecords">Show Records:</label>
            <select class="form-control" id="ShowRecords" name="showrecords">
                <option value="all">Show All Records</option>
                <option value="invalid">Show Invalid Records</option>
                <option value="valid">Show Valid Records</option>
            </select>
        </form>
    </div>
</div>