Bootstrap水平格式化

我正在努力使頁面更好地理解Bootstrap格式，但我很難搞清楚如何使用與其他類的類關聯的列。我想創建一個窗口來保存一個潛在的Javascript遊戲。在它旁邊，我想要放置一個矩形區域來顯示分數。我希望得到幫助的事情是瞭解如何在HTML和Bootstrap中格式化div以創建遊戲區域和記分板區域。下面是一段代碼，我正在搞亂它的空間，但我不知道該如何處理它。Bootstrap水平格式化

<div class="row"> 
<div class="col-sm-1"></div> 
<div class="col-sm-8">Here is a column</div> 
<div class="well">Game container</div> 
<div class="col-sm-2">Here is another column</div> 
<div class="col-sm-1"></div>

此連結的總體佈局，我瞄準的圖像。 http://imgur.com/a/FMznH

謝謝你的幫助。

來源

2016-11-21 Aidan Clarke

您可以將此結構用於您的任務。並且您可以根據您的要求自定義（列的寬度）。

<div class="row"> 
<div class="col-md-4">Here is a column</div> 
<div class="col-md-4">Javascript container</div> 
<div class="col-md-4">Score column</div> 
</div>

來源

2016-11-21 04:23:37

這看起來像佈局，對嗎？

<div class="row"> 
<div class="col-sm-7 col-sm-offset-1 " style="background-color: aliceblue;">Here is a column</div> 
<div class="col-sm-2 col-sm-offset-1" style="background-color: aliceblue;" >Here is another column</div> 
</div>

來源

2016-11-21 04:36:59

在引導各行可以有高達12列和XS，SM，MD，LG指定它有多少行分別採取超小，小型，中型和大型裝置。

所以，如果你寫

<div class="row"> 
    <div class="col-xs-12"></div> 
</div>

這將與1列採取一切空間大於和等於一個額外的小型設備（-xs）的所有設備創建第一行。

如果你寫

<div class="row"> 
    <div class="col-md-8"></div> 
    <div class="col-md-4"></div> 
</div

這將創建第二行與列記錄空間等於8列和第二列記錄空間等於4列。注意總和12（8 + 4）。並且這將在所有設備中大於和等於中等設備（-md）和所有較小的設備（-sm，-xs）中佔用這個空間，它將分成1列，佔用空間12列像你的第一排。

第三行可以創建類似於第一行。我希望這會有所幫助，如果您有任何其他疑問，可以對此進行評論:)

來源

2016-11-21 04:48:47 Arshmeet

這將是您提供的圖像中的示例兩列布局。

.custom { 
 
    background: #eeeeee; 
 
    height: 500px; 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-8"> 
 
    <div class="custom"> 
 
     1st column 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <div class="custom"> 
 
     2nd column 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

來源

2016-11-21 05:02:30 claudios

Bootstrap水平格式化

回答

相關問題