HTML/CSS /自舉：網頁設計與<row>

Question

我想實現網絡佈局如下：

（這是一個悲慘的草圖，但我認爲它可以給你一個想法是什麼佈局我想實現）。

由於我對Bootstrap非常熟悉，因此使用它並沒有問題（實際上我打算用它的class="row" -elements來做）。思考了一下後，我想出了這樣的事情：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col-md-6" style="float: left;"> 
 
    <h3 style="width: 70%;">Lorem </h3><span class="label label-primary" style="width: 30%;"><a href="lol">Ipsum</a></span></div> 
 
    <div class="col-md-6" style="float: right;"> 
 
    <h3>Lorem </h3><span class="label label-success">YAY</span></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-4" style="float: left;"> 
 
    <h4>Bla</h4><span class="label label-info">Heey</span></div> 
 
    <div class="col-md-4"> 
 
    <h4>Amigo</h4><span class="label label-danger">LOOOOOOL</span></div> 
 
    <div class="col-md-4" style="float: right;"> 
 
    <h4>guyz</h4><span class="label label-warning">easy life</span></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-4" style="float:left;"> 
 
    <h4>XDXDXD</h4><span class="label label-info">SUM M0AR</span></div> 
 
    <div class="col-md-4"> 
 
    <h4>Icould do better</h4><span class="label label-primary">Y´all know</span></div> 
 
    <div class="col-md-4" style="float: right;"> 
 
    <h4>BUT I NEED</h4><span class="label label-warning">THIS DESIGN</span></div> 
 
</div>

至於其實我認爲，它完全失敗（不推該運行段按鈕，你的腦袋就會爆炸） 。

澄清（再次）：我想有什麼有點像2行divs，每個文本保存自己。第二行有三個div，旁邊還有文字，並且完全適合屏幕的100％。

草圖中的灰色是div（除了最頂端的，這是一個導航欄），所有的白色是文本（當然除了背景）。

Answer 1

不要float您的Bootstrap列。根據需要在列上使用text-right或text-center類。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <h3 style="width: 70%;">Lorem </h3><span class="label label-primary" style="width: 30%;"><a href="lol">Ipsum</a></span></div> 
 
    <div class="col-md-6"> 
 
     <h3>Lorem </h3><span class="label label-success">YAY</span></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <h4>Bla</h4><span class="label label-info">Heey</span></div> 
 
    <div class="col-md-4"> 
 
     <h4>Amigo</h4><span class="label label-danger">LOOOOOOL</span></div> 
 
    <div class="col-md-4"> 
 
     <h4>guyz</h4><span class="label label-warning">easy life</span></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <h4>XDXDXD</h4><span class="label label-info">SUM M0AR</span></div> 
 
    <div class="col-md-4"> 
 
     <h4>Icould do better</h4><span class="label label-primary">Y´all know</span></div> 
 
    <div class="col-md-4"> 
 
     <h4>BUT I NEED</h4><span class="label label-warning">THIS DESIGN</span></div> 
 
    </div> 
 
</div>