Question

我试图将html控件彼此相邻并没有给出巨大的空间，我试图覆盖bootstrap .css但没有运气。

这是我的屏幕看起来像：

enter image description here

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

<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

JSBIN

你的布局让我困惑。所以我做了另一个实现。关键代码：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Rows per page:</label>
    <select name="" id="" class="form-control">
      <option value="1">test</option>
      <option value="1">test</option>
      <option value="1">test</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Total records:</label>
    <span class="text-danger">99</span>
  </div>
  <div class="form-group">
    <label for="exampleInputName2">Show Records:</label>
    <select name="" id="" class="form-control">
      <option value="1">test</option>
      <option value="1">test</option>
      <option value="1">test</option>
    </select>
  </div>
</form>

Answer 2

布局中的大空间是由使用网格列宽度引起的。 Bootstrap 提供inline form element styling，建议使用它而不是网格列。

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

您可以在下方查看此更正的代码段。 请注意，您必须在“整页”模式下运行才能正确查看。默认情况下，form-inline工具仅适用于大于768px的视口。

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

如何相互对齐控件

2 个答案: