Question

我正在尝试在bootstrap中创建网格，但无论我如何定义列 - 每列都向下移动到新行 - 而不是创建一个长行。

我试过的代码（来自w3schools教程）：

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"      
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container-fluid">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>

      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
      </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

您的列成为自己的行的唯一可能原因是您使用它们的窗口/视口/区域小于768像素宽。

将列布局从最大屏幕尺寸维持到最小屏幕尺寸的最简单方法是使用col-xs-*类而不是sm，md或lg版本。

<强> HTML：

<div class="container-fluid">
     <h1>Hello World!</h1>

    <p>Resize the browser window to see the effect.</p>
    <div class="row">
        <div class="col-xs-4" style="background-color:lavender;">.col-xs-4</div>
        <div class="col-xs-4" style="background-color:lavenderblush;">.col-xs-4</div>
        <div class="col-xs-4" style="background-color:lavender;">.col-xs-4</div>
    </div>
</div>

<强> FIDDLE

如果拖动结果区域的右侧分隔条使其更宽或更窄，您将看到列始终保留在同一行中，并且永远不会换行到下一行。如果你需要某种包装，那么你需要根据你希望它们在特定窗口/视口宽度处包装的方式，为每一行添加正确的网格类来设置它们的包装方式。

尝试在bootstrap中创建一些包含几列的行

1 个答案: