html - 容器外的 Bootstrap 布局

Question

我想在一个布局有点疯狂的元素中使用 Twitter Bootstrap。

Logo 的背景应从窗口边缘开始，但 Logo 中的文本应从 .container 开始的位置开始。疯了，哈!

我不知道怎么解释，所以我画了它!

到目前为止我所做的是:

<div class="container">
  <header>
    <div id="logo" class="pull-left col-sm-3 bg-theme">
      <div class="typography">
        Dope
        <br/>
        Text
      </div>
    </div>
    <div class="col-sm-9">
      <nav class="pull-right"> nav should be here </nav>
    </div>
  </header>
  <!-- header -->
</div>


#logo {
  position: relative;
  height: 100px;
  background: #ffd800;
}

.typography {
  position: absolute;
  right: 0px;
  top: 20px;
  line-height: 50px;
  font-size: 50px;
  font-weight: bold;
}

我创建了一个 demo@jsFiddle .

我应该如何构建我的 HTML，或者我可以用 CSS 做些什么来实现这种效果。

如果可能，仅使用 CSS 的解决方案。

编辑:这种标题元素可能会再次出现在页面上，因此基于元素将位于页面顶部这一事实的解决方案不是我所追求的.

Answer 1

首先，您必须考虑网格系统规则:

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
  negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
  three .col-sm-4

所以按照上面的规则你可以像这样实现你想要的:

这里是工作 JSFiddle从你的 fork

#logo {
    position: relative;
    height: 100px;
    background: #ffd800;
}
.container {
    height: 500px;
}
.typography {
    line-height: 35px;
    font-size: 35px;
    font-weight: bold;
    padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
    <header>
        <div class="row">
            <div id="logo" class="pull-left col-xs-5 bg-theme">
                <div class="row">
                    <div class="col-xs-offset-5 col-xs-7 typography">Dope
                        <br/>Text</div>
                </div>
            </div>
            <div class="col-xs-7">
                <nav class="pull-right">nav should be here</nav>
            </div>
        </div>
    </header>
    <div class="row">
        <div class="container col-xs-offset-2 col-xs-8">
            <p>Here you can put the content</p>
            <p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
        </div>
    </div>
</div>

您可以根据需要更改 col-xs-X 中的 # 以获得您想要的布局，但始终尝试遵循上述规则。