Question

https://jsfiddle.net/5nj5nmqz/3/

<h1 class="page-header row">
      Header
      <div class="col-md-4">
          <a href="#" class="btn btn-default">
              Export spreadsheet
              <i class="fa fa-download"></i>
          </a>
      </div>
      <div class="col-md-4 form-group has-feedback">
          <input type="text" class="form-control search pull-right" placeholder="Search by check name...">
          <span class="glyphicon glyphicon-search"></span>
      </div>
</h1>

让标题内的元素正确对齐，以及在输入字段内部引导一个bootstrap glyphicon图标时遇到一些麻烦。

有关如何正确完成此操作的任何想法？我尝试在行中包裹并移动列，但每次都似乎关闭了。

Answer 1

试试这个。

<h1 class="page-header">Header</h1>
<div class="row">
    <div class="col-md-4">
        <a href="#" class="btn btn-default pull-right export">
            Export spreadsheet
            <i class="fa fa-download"></i>
        </a>
    </div>

    <div class="col-md-4 form-group has-feedback pull-right">
        <div class="form-group has-feedback">
            <input type="text" class="form-control search pull-right" placeholder="Username" />
            <i class="glyphicon glyphicon-search form-control-feedback"></i>
        </div>
    </div>
</div>

很少有事情需要注意：

<h1 class="page-header row">错了。使用引导程序col时，您应该只需说出<div class="row">即可创建一行。

我认为Bootstrap每行可以有12列。如果您正在设计行列方式，正确的方法是创建<div class="row">，其子项应为<div class="col-**-n">，其中所有子项的n加起来为12。

引导标头内的图标对齐方式

1 个答案: