bootstrap input-prepend使两个div内联（在同一行中），没有新行

Question

＆＃13;

＆＃13;

myBindingSource.Filter = "SomeColumn = " & someValue

＆＃13;

＆＃13;

＆＃13;

结果是：

所以，两个div在同一行。我怎么能换新线？ div的默认sytle是block，这意味着当我使用<!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.jss"></script> <div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>和prependedInput时，它会将其更改为内联？

bootstrap版本是2.3.2

Answer 1

当您看到Bootstrap 2.3.2中提供的文档时，它并未声明您的班级input-append和input-prepend将位于同一行。

出于清晰的目的，它只是出现了。但是当您将其更改为较小的屏幕即col-xs-12时，也会看到您将在新行中获取它。

是<br>还是col-xs-12：

＆＃13;

＆＃13;

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.jss"></script>
<form class="bs-docs-example">
  <h4>Using <code>col-xl-12</code></h4>

  <div class="col-xl-12">
    <div class="input-prepend">
      <span class="add-on">@</span>
      <input class="span2" id="prependedInput" type="text" placeholder="Username">
    </div>
  </div>

  <div class="col-xl-12">
    <div class="input-append">
      <input class="span2" id="appendedInput" type="text">
      <span class="add-on">.00</span>
    </div>
  </div>
</form>

<h4>Using <code>&lt;br/&gt;</code></h4>

<form class="bs-docs-example">
  <div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
  </div>
  <br>
  <div class="input-append">
    <input class="span2" id="appendedInput" type="text">
    <span class="add-on">.00</span>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;