HTML/CSS block 未出现

Question

我似乎不明白为什么下面的内容没有进入 HTML 中定义的框内

这是图像，因为我还没有足够的代表将其添加到格式 http://i.stack.imgur.com/A3nWx.png

这是我正在使用的 HTML

<div class="row">
    <div class="col-md-4">
        <div class="block">
            <div class="block-title">
                <h2>Title</h2>
            </div>
            <div class="box-body">
                <div class="col-md-1">
                    <h4>Server 1</h4> 
                    <span class="label label-success">Online <i class="fa fa-check"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

选项1

查看您的代码，我想您正在使用 Twitter Bootstrap。

根据您的代码，您有列 <div class="col-md-1">外栏里面的类<div class="col-md-4"> .

例如:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-1">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请注意，bootstrap 要求您用 <div class="row"> 包装列从而清除 float 。

选项 2

您可以添加 clear: both;在你的 css 代码中的 .box-body 类中。它将清除列 float 。