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水平格式化

回答

相关问题