我追求高低,我90％确信我的问题源于浮动元素,我的问题的答案是正确应用清晰.
不幸的是,我不太熟悉CSS,知道在哪里应用修复和黑客攻击它似乎没有让我在那里,有人可以帮忙吗？
我希望井扩展到包含我的BootStrap列元素及其子代.
如果你想现场观看,我有以下HTML in a CodePen：
<div class="container-fluid">
<div class="well">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
</div>
解决方法
这里的问题是你不包含一个行元素来保存所有col div.
所以你需要做的就是将类行添加到你的类所在的同一个div中.
像这样：
<div class="container-fluid">
<div class="well row">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
这是一个Bootply给你一个视觉.
现在,因为一行最多只能容纳12列..你将无法在该行中添加任何更多col,因为1 10 1 = 12 …你必须创建另一行,除非你当然要创建当前行col较小.
希望这可以帮助！
