Question

有没有人知道如何使用Zurb的基金会将内容集中在全宽行上？

我目前有：

HTML

    <div class="row full-width nav-back">

        <div class="row large-12 column">

        <!-- CONTENT -->

        </div>

    </div>

CSS

.nav-back{
height:80px;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #004B91),
color-stop(1, #002952));
background-image: -o-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -moz-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -webkit-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -ms-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: linear-gradient(to bottom, #004B91 0%, #002952 100%);

}

这使得内容在＆＃34;大12列＆＃34; div伸展100％与父容器相同＆＃34;全宽＆＃34;

有没有办法让＃12; big-12列＆＃34;中包含的内容居中？？

谢谢： - ）

Answer 1

您是否尝试删除嵌套列容器中的行？

<div class="row full-width nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

也可能是.full-width负责行的100％。通常行具有最大宽度，超出时会使内容居中。在基础文档中max-width: 80rem;。所以你可以尝试没有全宽。

<div class="row nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

以.large为中心，您也可以将较小的列放在一行中，因为12列（大12，中12等）通常是100％。

<div class="row full-width nav-back">
  <div class="large-10 large-centered columns"><!-- CONTENT --></div>
</div>

在Foundation中的全宽行内居中心内容

1 个答案: