html - 如何让我的两个 div 与 bootstrap 对齐？

Question

我有一个 Bootstrap 输入，需要在它的右边有另一个 div，但它似乎与我正在使用的代码不一致。

HTML(带有 bootstrap 和 fontawesome)

<div class="row">
<div id="mobNum" class="input-group margin-bottom-sm col-xs-6"> 
<span class="input-group-addon" style="width:20px"><i class="fa fa-phone-square" aria-hidden="true"></i></span><input id="mobile" class="form-control requiredClass" type="text" placeholder="Mobile Number.."/></div>
    <div id="showDivMobile" class="showDivClass needData" style="col-xs-6">
         <i class="fa fa-asterisk showCSS " aria-hidden="true"></i>vv<br/></div>
</div>

还有我的 fiddle :http://jsfiddle.net/JLjjK/1350/

Answer 1

使用 Bootstrap 时，将布局相关的类(col 和 row)放在单独的 div 元素中是一个好习惯；这些类不应出现在输入组等其他元素中。

在您的情况下，当您将 input-group 与 col-xs-6 结合使用时，它会覆盖 float 属性并破坏您的布局，将 div 放置在两个单独的行上。

尝试像这样分开它们:

<div class="row">
  <div class="col-xs-6">
    <div id="mobNum" class="input-group margin-bottom-sm">...</div>
  </div>
  <div class="col-xs-6">
    <div id="showDivMobile" class="showDivClass needData">...</div>
  </div>
</div>

希望这对您有所帮助!