Question

我创建了这个html： col-sm-12中有两个输入字段：在下一栏中，我有一个提交按钮：

<div class="row">

   <div class="col-sm-12">       
     <input id="bis" class="form-control input-sm a" type="text" value="18-12-2013" placeholder="Bis" name="bis">
     </input>

     <input id="von" class="form-control input-sm a" type="text" value="02-12-2013" placeholder="Von" name="von">
     </input>
   </div>

   <div class="col-sm-12">
     <input class="btn btn-info btn-sm" type="submit" value="Filtern" style="float:right" name="commit">
     </input>
   </div>

</div>

并将这个额外的css添加到文本字段：

.a {width:100px; float:right}

因为我试图让输入字段彼此相邻，并且在下面的下一列中提交按钮。

我现在的问题是提交按钮现在除了两个输入字段外！虽然我想在下面！为什么？感谢

小提琴：http://jsfiddle.net/52VtD/807/

Answer 1

那是因为在浮动元素之后你不是clear。

您有两种解决方案：

将其添加到您的CSS中：
```
 .col-sm-12 {
    clear:both;
 }
```

this article中的所有内容都是您需要了解的float的使用方法。

两次使用display:inline-block代替float：
```
 .a {
   display:inline-block;
 }
```

演示 http://jsfiddle.net/52VtD/814/

Answer 2

使用 CSS clear属性。有关详细信息，请参阅CCS-CLEAR>>。

在这里你可以试试这个：

.col-sm-12 {
    clear:both;
 }

向右浮动使我的列变得一团糟

2 个答案: