Question

我追求高低，我90％确信我的问题源于浮动元素，我的问题的答案是clear的正确应用。

不幸的是，我不太熟悉CSS，知道在哪里应用修复和黑客攻击它似乎没有让我在那里，有人可以帮助吗？

我希望well扩展为包含我的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>

Answer 1

这里的问题是您没有包含row元素来保存所有col div。

所以您需要做的就是将课程row添加到您的班级div所在的well。

像这样：

<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, 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>

这是一个Bootply给你一个视觉效果。

现在，因为row最多只能容纳12列..因为1 + 10 + 1 = 12，您将无法再在col内添加row ......你必须创建另一个row，除非你当前使col更小。

希望这有帮助！

为什么我的自举井高度没有增加以容纳内部的列和行？

1 个答案: