Question

我正在尝试使用bootstrap网格进行table strcuture，我想知道以下哪种结构在语义上是最好和最正确的。

.row {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class='container'>
  <div class='row'>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
  </div>
  <div class='row'>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
  </div>
  <div class='row'>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
  </div>
  <div class='row'>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
  </div>
</div>

或者我应该采用这种结构

.w-100 {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class='container'>
  <div class='row'>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
    <div class="w-100"></div>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
    <div class="w-100"></div>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
    <div class="w-100"></div>
    <div class='col'>A</div>
    <div class='col'>B</div>
    <div class='col'>C</div>
    <div class='col'>D</div>
    <div class='col'>E</div>
  </div>
</div>

我从我的两个设计中了解到，第一个设计风格要容易得多，但第二个设计非常简单，难以设计，但这是关于它的吗？

Answer 1

两种结构都很好，但我建议你选择第一种结构。在第二个添加.w-100时，您必须混合一些响应式实用程序，如引导文档中所述，以使多行列响应。

通过在希望列断开到新行的位置插入.w-100，创建跨越多行的等宽列。通过将.w-100与一些响应式显示实用程序混合来使休息响应。

您可以找到响应式显示实用程序here.

请记住，在第一个结构中，您只是创建不同的行，每个行具有相等的宽度列，但是在第二个结构中，您使用.w-100类创建相等宽度的多行列。有关进一步说明，请阅读bootstrap文档或源CSS代码。

重要提示：我建议您不要使用这些方法中的任何一种，但要使用bootstrap中提供的表类。他们是有原因的。

我应该使用.w-100还是.row来制作类似于表格的网格设计

1 个答案: