如何在bootstrap列中放置两个div？

Question

我想在列中放置两个div。但是，当我添加边距或浮动属性时，它没有帮助。

<div class="col-xs-1">
            <div class="main-checkbox">
                <input type="checkbox" /></div>
            <div class="arrow-down"></div>
        </div>

.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
float: right;
margin-top:5px;}

.main-checkbox {
width:13px;
margin-left:10px;}

我需要一个复选框和旁边的小三角形。

Answer 1

让我们看看它是否有效。只需添加已存在于bootstrap css中的左拉。它的作用类似于 float：left 。因此，您不再需要编写任何样式表。

<div class="col-xs-1">
 <div class="main-checkbox pull-left">
 <input type="checkbox" /></div>
 <div class="arrow-down pull-left"></div>
</div>

Answer 2

将display:inline-block;添加到其中，如：

.arrow-down {
   width: 0;
   height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 7px solid black;
  margin-top:5px;
   display: inline-block;
}
.main-checkbox {
   width:13px;
   margin-left:10px;
   display: inline-block;
}

参见 FIDDLE