Question

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

HTML（使用bootstrap＆amp; 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>

我的小提琴：http://jsfiddle.net/JLjjK/1350/

Answer 1

使用Bootstrap时，最好将与布局相关的类（ col 和行）放在单独的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>

希望这有帮助！

Answer 2

<div style="display:flex;">
  <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 col-xs-6">
   <i class="fa fa-asterisk showCSS " aria-hidden="true"></i>vv<br/>
  </div>
</div>

Answer 3

问题在于来自bootstrap的代码

tasks.withType(JavaCompile) { options.compilerArgs << '-parameters' options.fork = true options.forkOptions.executable = 'javac' }

输入组的CSS规则

<div id="mobNum" class="input-group margin-bottom-sm col-xs-6">

它应该是.input-group[class*=col-] { float: none; // this is the problem padding-right: 0; padding-left: 0; }所以写一个内联样式让它向左浮动它应该没问题。

另一个问题是float:left它必须进入style="col-xs-6"

这是 working fiddle 。

已完成的更改

class

和

<div id="mobNum" class="input-group margin-bottom-sm col-xs-6" style="float:left">

如何让我的两个div与引导程序对齐？

3 个答案: