HTML / CSS塊未顯示

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-4">包含列<div class="col-md-1">類。

例如：

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

請注意，引導程序要求您用<div class="row">包裹一列，以清除浮點數。

選項2

您可以添加clear: both; 在CSS代碼中的.box-body類中。 它將清除列浮點數。

Answer 2

md_5嗨。 看起來您想讓標題的標題位於箱體中。

這樣的例子怎么樣。 我使用一些顏色來顯示每個塊。

這是小提琴 。

<div class="container col-xs-6 block1">
    <div class="row">
        <div class="col-md-4">
            <div class="block-title bg-primary">
                <h2>Title</h2>
            </div>
            <div class="box-body col-md-12 bg-info">               
                <h4>Server 1</h4> 
                <span class="label label-success">Online <i class="fa fa-check"></i></span>           
            </div>
        </div>
    </div>

</div>

Answer 3

為了解決這個問題，我添加了clearfix類。 感謝您提醒我Math4w。 這是有關clearfix類的一些文檔的鏈接： http ://getbootstrap.com/css/#grid-sensitive-resets

所以最終的代碼看起來像這樣，

 <div class="row">
    <div class="col-md-4">
        <div class="block">
            <div class="block-title">
                <h2>Servers</h2>
            </div>
            <div class="clearfix">
              <div class="col-md-4">
                  <p class="well text-center">
                      <strong>Server 1</strong>
                      </br>
                      <span class="label label-success"><i class="fa fa-check">Online</i></span>
                  </p>
              </div>
            </div>
        </div>
      </div>
  </div>