擬合12格引導佈局的8列布局？

好吧，所以我試圖用Bootstrap重新創建這個頁面，但是我在這裏被困在這個部分。擬合12格引導佈局的8列布局？

我的2個問題是：

哪個HTML元素應該被用於這些線路？
如何將12列布局分成8個相同的部分？

代碼示例：

<div class="container" style="margin-top: 3%; "> 
    <div class="row"> 
     <div class="col-xs-6 col-xs-offset-3"> 
      <div class="row"> 
       <div class="col-xs-6"> 
        <div class="form-group"> 
         <input type="text" class='form-control' placeholder="First Name"> 
        </div> 
       </div> 
       <div class="col-xs-6"> 
        <div class="form-group"> 
         <input type="text" class='form-control' placeholder="Last Name"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="form-group"> 
         <input type="text" class='form-control' placeholder="Display name"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="form-group"> 
         <input type="text" class='form-control' placeholder="Email Address"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-6"> 
        <div class="form-group"> 
         <input type="password" class='form-control' placeholder="Password"> 
        </div> 
       </div> 
       <div class="col-xs-6"> 
        <div class="form-group"> 
         <input type="password" class='form-control' placeholder="Confirm Password"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-3"> 
        <button class="btn btn-secondary">I Agree</button> 
       </div> 
       <div class="col-xs-9"> 
        <p> 
         By clicking <span class="label label-primary">Register</span> you agree to the <a href=#>Terms and Conditions</a> set out by this site, including our Cookie Use 
        </p> 
       </div> 
      </div> 

      <div class="row"> 

      </div> 

      <div class="row" style=""> 
       <div class="col-xs-6"> 
        <button class="btn btn-primary btn-block" style="font-weight: bold;">Register</button> 
       </div> 
       <div class="col-xs-6"> 
        <button class="btn btn-success btn-block" style="font-weight: bold; ">Sign In</button> 
       </div> 
      </div> 

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

來源

2017-03-17 Zack Guetta

的另一種方法是將行分成兩個，並且每半四個，這樣的：

<div class="row"> 
    <div class="col-xs-6> 
     <div class="row"> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="row"> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
      <div class="col-xs-3></div> 
     </div> 
    </div> 
</div>

所以你將有八個相等的部分，並將保存包裝。

哪些html元素應該用於這些行 - 在這裏您可以嘗試使用div，span，甚至hr。你試一試。 :)

來源

2017-03-17 15:31:18

正是我需要的，謝謝！ –

很高興爲您服務！ :) –

試試這個

<div class="row"> 
    <div class="col-xs-2></div> 
    <div class="col-xs-8">{YOUR COLORS HERE}</div> 
    <div class="col-xs-2></div> 
</div>

您可以使用顏色爲圖像或一組在容器包裹的div將它們全部上漂浮起來始終是同一條線。

<div style="position:relative;display:block;width:100%;height:16px"> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:red"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:blue"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:green"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:orange"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:teal"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:cyan"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:purple"></div> 
    <div style="position:relative;display:inline-block;width:12.5%;background-color:black"></div> 
</div>

這會給你在你的多彩行兩邊同等的填充:)希望這對你有效。您也可以對所有行執行相同的操作，以使所有內容像圖像一樣對齊，只需填充一點，然後居中。或分割行分成2（6），然後將每個成4（3）

來源

2017-03-17 15:25:29

這工作，以及由於 –

歡迎你，請記住有實現這一幾種方式。 –

試試這個

<div class="row"> 
    <div class="row col-xs-3"> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-6"></div> 
    </div> 
    <div class="row col-xs-3"> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-6"></div> 
    </div> 
    <div class="row col-xs-3"> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-6"></div> 
    </div> 
    <div class="row col-xs-3"> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-6"></div> 
    </div> 
    <div class="row col-xs-3"> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-6"></div> 
    </div> 
</div>

或本

<style> 
.colorbar{ 
    display: inline-block; 
    margin: -2px; 
    width: 12.5%; 
    height: 10px; 
} 
/*add some color*/ 
</style> 
<div class="row"> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
    <span class="colorbar"></span> 
</div>

來源

2017-03-17 17:52:27

最簡單的方法，我用這些風格是使用HTML5 Canvas。
所以我寫這篇文章的代碼：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 

 
     #myCanvas { 
 
      width: 500px; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <canvas id="myCanvas" width="800" height="20" >Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
    <script> 
 
     var c = document.getElementById("myCanvas"); 
 
     var line1 = c.getContext("2d"); 
 
     line1.beginPath(); 
 
     line1.moveTo(0,0); 
 
     line1.lineTo(100,0); 
 
     line1.lineWidth = 20; 
 
     line1.strokeStyle = "#6FCCAC"; 
 
     line1.stroke(); 
 

 
     var line2 = c.getContext("2d"); 
 
     line2.beginPath(); 
 
     line2.moveTo(100,0); 
 
     line2.lineTo(200,0); 
 
     line2.lineWidth = 20; 
 
     line2.strokeStyle = "#9830B5"; 
 
     line2.stroke(); 
 

 
     var line3 = c.getContext("2d"); 
 
     line3.beginPath(); 
 
     line3.moveTo(200,0); 
 
     line3.lineTo(300,0); 
 
     line3.lineWidth = 20; 
 
     line3.strokeStyle = "#B55C59"; 
 
     line3.stroke(); 
 

 
     var line4 = c.getContext("2d"); 
 
     line4.beginPath(); 
 
     line4.moveTo(300,0); 
 
     line4.lineTo(400,0); 
 
     line4.lineWidth = 20; 
 
     line4.strokeStyle = "#6A8ED2"; 
 
     line4.stroke(); 
 

 
     var line5 = c.getContext("2d"); 
 
     line5.beginPath(); 
 
     line5.moveTo(400,0); 
 
     line5.lineTo(500,0); 
 
     line5.lineWidth = 20; 
 
     line5.strokeStyle = "#C2C153"; 
 
     line5.stroke(); 
 

 
     var line6 = c.getContext("2d"); 
 
     line6.beginPath(); 
 
     line6.moveTo(500,0); 
 
     line6.lineTo(600,0); 
 
     line6.lineWidth = 20; 
 
     line6.strokeStyle = "#00C2AE"; 
 
     line6.stroke(); 
 

 
     var line7 = c.getContext("2d"); 
 
     line7.beginPath(); 
 
     line7.moveTo(600,0); 
 
     line7.lineTo(700,0); 
 
     line7.lineWidth = 20; 
 
     line7.strokeStyle = "#79C257"; 
 
     line7.stroke(); 
 

 
     var line8 = c.getContext("2d"); 
 
     line8.beginPath(); 
 
     line8.moveTo(700,0); 
 
     line8.lineTo(800,0); 
 
     line8.lineWidth = 20; 
 
     line8.strokeStyle = "#D5DB22"; 
 
     line8.stroke(); 
 
    </script> 
 

 
</body> 
 
</html>

如果你想了解如何使用Canvas我總是提供這些網站：

html5canvastutorials
W3 Schools
MDN
但是爲了解釋我的代碼...您在head標籤中看到style標籤。正如你應該知道的那樣，代碼確定了畫布真實的width。當我說真正的寬度意味着它不同於你在畫布標籤中看到的width。我們在canvas標籤中使用的width和height只是爲了設置一個工作區來設置圖形的點，如填充或筆畫。並且每個十六進制代碼都是線條顏色。

希望這將有助於...

來源

2017-03-17 21:28:44

擬合12格引導佈局的8列布局？

回答

相關問題