Question

目前在dekstop视图中，身体是居中的，这是完美的。但是当我调整浏览器的大小时，它会拉伸以修复整个浏览器的宽度，我不想要这个。无论浏览器大小有多小或多大，我都更喜欢我使用类行的第一个div在中心，在左右两侧留下一些空间。如何实现它？

我的HTML如下：

<div class="row" style="background-color:#072438;margin-top:20px;">

      <div class="small-12  medium-12 large-12 columns" style="background-color:#fbfbfb;margin-top:3px;height:30px;border:1px solid #ececec;">         

      </div>

      <div class="small-12 medium-12 large-12 columns" style="background-color:#ffffff;height:138px;">
        <div class="large-12 columns" style="background-color:#ff0;height:90px;margin-top:20px;">
            header
        </div>
      </div>

      <div class="small-12 medium-12 large-12 columns" style="background-color:#2D2D2D;height:47px;">

      </div>
    </div>

    <div class="row">
      body to go here
    </div>

这是基础

的类行css

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 64.78rem; 



  }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row.collapse > .column,
  .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .row.collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .row .row {
    width: auto;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none; }
    .row .row:before, .row .row:after {
      content: " ";
      display: table; }
    .row .row:after {
      clear: both; }
    .row .row.collapse {
      width: auto;
      margin: 0;
      max-width: none; }
      .row .row.collapse:before, .row .row.collapse:after {
        content: " ";
        display: table; }
      .row .row.collapse:after {
        clear: both; }

谢谢大家。

Answer 1

您必须更改媒体查询中的主要元素（pageWrapper）宽度。默认情况下它可能类似于{width：1040px}。但在媒体查询后，其宽度为100％。只需改变80％或任何你想要的东西，它应该工作。

Answer 2

尝试将行的最大宽度更改为80％

.row{max-width: 70%;}

您可以从左侧和右侧保留所需的空间，这将适用于所有屏幕分辨率

Answer 3

我认为你要求总是保留.row的左右边距，我找到了一个稍微不同的问题的答案Zurb Foundation 5 - Row padding/margin有一个很棒的JSFiddle - 只需更新边距到得到你想要的结果。

基础5-如何集中课程排名＆＃39; row＆＃39;无论浏览器大小？

3 个答案: