Question

我正在制作一个页面以更好地理解Bootstrap格式，但是我很难确定如何使用与其他类型的类相关联的列。我想创建一个窗口来举行潜在的Javascript游戏。在它旁边，我想要显示一个矩形区域来显示分数。我很感激帮助的是理解如何格式化HTML和Bootstrap中的div以创建游戏区域和记分板区域。这是一段代码片段，我正忙着把它放到一边，但我不知道该如何处理它。

<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

感谢您的帮助。

Answer 1

您可以将此结构用于您的任务。您可以根据需要自定义（列的宽度）。

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

Answer 2

这看起来像布局，对吧？

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

Answer 3

引导程序中的每一行最多可包含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列。

可以创建与第一行类似的第三行。我希望这有帮助，如果您有任何其他疑问，可以对此发表评论:)

Answer 4

这将是您提供的图像的示例两列布局。

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

Bootstrap水平格式化

4 个答案: