Question

我想将Twitter Bootstrap用于一个有点疯狂布局的项目。

徽标的背景应从窗口边缘开始，但徽标中的文字应从.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

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

一些Bootstrap网格系统规则：


行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充

使用行创建水平的列组

内容应放在列中，只有列可能是行的直接子项

.row和.col-sm-4等预定义类可用于快速制作网格布局

列通过填充创建装订线（列内容之间的间隙）。该填充通过
在第一列和最后一列的行中偏移   .rows
上的负余量
通过指定要跨越的12个可用列的数量来创建网格列。例如，三个相等的列将使用
  三.col-sm-4

因此，遵循上述规则，您可以实现您想要的目标：

这是一个来自你的JSFiddle分叉

＆＃13;

#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*/
}

＆＃13;

<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>

＆＃13;

您可以更改col-xs- X 中的＃，因为您希望获得所需的布局，但始终尝试遵循上述规则。

Answer 2

会是这样的吗？ http://jsfiddle.net/swm53ran/312/

如果你想看看结构是如何反复出现的，你可以在这个小提琴中添加截断的div：http://jsfiddle.net/swm53ran/313/

<div class="body">
  <div class="header col-xs-12">
    <div class="row">
      <div class="title col-xs-offset-1 col-xs-5">
        This is the title
      </div>
      <div class="nav col-xs-5">
        This is your nav
      </div>
    </div>
  </div>
  <div class="container col-xs-10 col-xs-offset-1">
    This is where your content goes.
  </div>
</div>

Answer 3

我建议进行以下更改。

首先制作.container-fluid
然后将.container移至.container-fluid
最后，将标题移到.container上方，但在.container-fluid

一旦完成它应该看起来像。

<div class="container-fluid">
  <header class="col-md-12>
    <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 class="container">
    <!-- Other content -->
  </div>
</div>

Answer 4

使用网格系统隔离标题和正文：

<div class="container">
  <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
     <div class="col-md-2">.col-md-2</div>
     <div class="col-md-4">.col-md-8</div>
     <div class="col-md-2">.col-md-2</div>
  </div>
</div>

Answer 5

使用.container-fluid表示您想要全宽的内容，而不是.container附带的固定宽度。

Per Bootstrap：

行必须放在.container（固定宽度）或.container-fluid（全宽）范围内，以便正确对齐和填充。

如果您希望container-fluid转到窗口的绝对边缘，可以将padding: 0;设置为：

.container-fluid {
  padding: 0;
}

这是一个小提琴演示供您查看。 http://jsfiddle.net/xsqezfro/（我在.container附近设置了边框，以便您可以看到div。

Answer 6

#logo {
  display:inline-flex;
  margin-left:-200px;
  background: #ffd800;
}

#logo .typography {
  margin-left:200px;
}

容器外部的Bootstrap布局

6 个答案: