Html 引导程序标题中的图标对齐

标题

在使标题中的元素正确对齐以及使引导图示符图标在输入字段中对齐方面有点困难

关于如何正确地做到这一点，有什么想法吗？我试着换行和移动列，但似乎每次都关闭。

试试这个

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

标题

需要注意的几件事：

是错误的。使用引导

col

s时，只需说

即可创建一行

---

我认为引导程序每行可以有12列。如果您正在设计行-列方式，正确的方法是创建一个

，它的子元素应该是

，其中所有子元素的n加起来是12。

啊，我尝试将行包含在标题中的原因是因为我希望所有元素都与标题内联。您的代码很接近，但似乎将它们放在标题下。我试图用行标记来包装标题，但这似乎也打破了设计。。。

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