使用 bootstrap 对齐

Question

我用的是AngularJs、Bootstrap、NodeWebkit.

我正尝试像这样创建我的页面'header：所以这是我的代码：

<div class="row">
<img class="col-md-offset-1 col-xs-1 col-sm-1 col-md-1 col-lg-1 img-rounded image-module-pd " src="{{titreImage}}"></img>
<h3 class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left titre-module">{{ titreLocalization | translate }}</h3>

<div class="input-group text-right">
    <span id="basic-addon1" class="input-group-addon glyphicon glyphicon-search" ></span>
    <input class="form-control"  ng-model="recherche_texte" Name="recherche_input" placeholder="{{ 'RECHERCHE_TITRE' | translate }}" type="text" style="width:250px;"/>
</div>

</div>

这是我得到的：

有几个问题：我的字形图标没有与输入完全垂直对齐，为什么？我刚刚粘贴了 bootstrap 文档中的示例。我的输入+字形不在右边我的输入 + 字形图标没有与我的标题垂直对齐。

我希望我的图片足够大，以便您能理解我的问题。

谢谢

Answer 1

重要的有小错误Bootstrap 3 rules:

第一个：

Content should be placed within columns, and only columns may be immediate children of rows

第二个：

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

第三名：

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>

因此，将您的图像、标题和搜索组件放入单独的 div 和 col class 中，并在需要的地方使用 offset，但请确保您的列count 加起来不会超过 12，否则这些内容将换行到下一行。

下面是一个工作示例，可在 Bootply 上使用代码进行操作：

<div class="row">
  <div class="col-xs-offset-1 col-xs-1">
    <img class="img-rounded image-module-pd" src="http://placehold.it/100x60">
  </div>
  <div class="col-xs-5">
    <h3 class="text-left titre-module">Title</h3>
  </div>
  <div class="col-xs-offset-2 col-xs-2">
    <div class="input-group text-right">
      <span id="basic-addon1" class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input class="form-control" ng-model="recherche_texte" name="recherche_input" placeholder="Search" type="text">
    </div>
  </div>
</div>

请注意，如果 col-xs class 存在并且您没有在更大的屏幕宽度上不需要其他断点：

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

要解决垂直对齐搜索组件的问题，请阅读涵盖此问题的其他帖子：

vertical-align with bootstrap 3

How to center align vertically the container in bootstrap

使用 bootstrap 对齐

Alignment using bootstrap

html

css

twitter-bootstrap