Question

首次使用Foundation框架的用户，我已经使用Bootstrap开发了我之前的所有网站，但现在我被迫建立了一个带有基础的网站。我注意到它们非常相似，但有些不同的框架。

我遇到了一个问题，希望你可以帮我解决这个问题。

我需要在网站上添加一个横幅，它是全宽的，文本在网格内，并且bg也是全宽的，请看我的意思：

这是我的HTML：

<div class="fullWidth">
        <div class="banner">
            <div class="logo">
                <a href="#"><img src="images/logo.svg"/></a>
            </div>
            <div class="row">
                <div class="bg-tagline">
                <h1 class="tagline">some text here</h1>             
                </div>
            </div>          
        </div>
    </div>

和css：

.fullWidth {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}
.banner {
  background: white url("images/baner.jpg") no-repeat center;
  height: 590px;
  background-size: cover;
  position: relative;
}
.logo {
  position: relative;
  padding: 1%;
  height: 5em;
  width: 5em;
}
.bg-tagline {
  color: #fff !important;
  background-color: white;
  width: 100%;
  margin: 0px auto;
}
.bg-tagline h1 {
  color: #fff !important;
  font-size: 1.2em;
  text-align: center;
}

Answer 1

据我所知，在基础框架中没有＆＃34;全宽＆＃34; 类;通常，在这些布局类型中，我只使用框架外的元素，例如：

<header id="banner">
    <div class="slogan">Your text banner here</div>
</div>

当然有些像你一样的CSS。如果你需要精心设计的东西（比如使用基础课程的布局），我会把div.slogan放在div.row内，然后从那里开始构建布局，当然行将限制为框架的最大宽度。

顺便说一句，如果您需要让整个框架具有更宽的行宽，您可以更改框架设置并重新编译。

Answer 2

就个人而言，我喜欢为行创建实用程序类：

.row.fullwidth {
    max-width:100em; // set your override width here
    margin: 0 auto;
}

每当我需要全宽度部分时，我就这样做：

  <div class="row fullwidth">
    <!--- content --->
  </div>

全宽类 - 基础框架

2 个答案: