您是否应该在一行中有一行，否则会导致问题？

【问题标题】：Should you ever have a row inside of a row or this will cause problems?您是否应该在一行中有一行，否则会导致问题？
【发布时间】：2020-11-07 10:45:29
【问题描述】：

我正在查看这个使用 bootstrap 3.3 的项目。

有一个布局页面有：

  <div class="container">
    <div class="row">
       <div class="col-sm-12 main">
           @RenderBody()
       </div>
    </div>  
  </div>

所以内页（将在@RenderBody() 处渲染）看起来像：

<div class="col-md-12>
   <div class="row">
        // content goes here
   </div>
</div>

目前在移动设备上显示混乱。这是非常错误的，或者在技术上可以让一个容器有一行，然后在父行内部有一行？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用 Bootstrap 3 绝对可以拥有类似的结构

<div class="container">
  <div class="row">
    <div class="col-sm-12 main">
      <div class="row">
        // content goes here
      </div>
    </div>
  </div>  
</div>

首先，您在示例中忘记了"。

.container 和 .col 具有 padding-left: 15px; padding-right: 15px;。而.row 有margin-left: -15px; margin-right: -15px;，所以你可以在.container 和.col 中使用.row。但是在.row 元素之后应该有任何.col 子元素，以补偿负边距。

<div class="container">
  <div class="row">
    <div class="col-sm-12 main">
      <div class="row">
        <div class="col-sm-12">
        // content goes here
        </div>
      </div>
    </div>
  </div>  
</div>

【讨论】：