Html 如何使控件彼此对齐

我试图在不给巨大空间的情况下对齐彼此相邻的html控件，并试图覆盖bootstrap.css，但没有成功

这是我的屏幕，看起来像：

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

每页行数：
10
25
50
全部的
记录总数：0
显示记录：
显示所有记录
显示无效记录
显示有效记录

你的布局把我弄糊涂了。所以我又做了一件事。 关键代码：

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

每页行数：
测试
测试
测试
总记录：
99
显示记录：
测试
测试
测试

布局中的大空间是使用网格列宽造成的Bootstrap提供，建议使用它而不是网格列

我不得不做的额外CSS调整是你的总面积。因为它没有输入或选择元素，所以垂直对齐稍微偏离。如果您有一行输入（如Bootstrap文档中所示），那么您不需要在这里添加任何CSS

您可以在下面查看此更正的代码段。请注意，您必须在“完整页面”模式下运行它才能正确查看。默认情况下，

forminline

工具仅在大于768px的视口中工作

。记录结果{
显示：内联块；
利润底部：3倍；
}

每页行数：
10
25
50
全部的
记录总数：0
显示记录：
显示所有记录
显示无效记录
显示有效记录

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