我正在使用 Twitter Boostrap 和它附带的网格系统。 对于我的#stories div,我想将它移到页面右侧,使其与“欢迎”div 垂直平行。
我遵循了 Boostrap 引用(脚手架部分)中的嵌套规则并根据他们的指南布置了我的代码,但无法让故事 div 的内容显示为右侧的一列。
我可能做错了什么?
下面的代码,以及底部的完整页面链接。
<div class="row">
<!-- welcome container -->
<div class="span8" id="welcome">
<h1>Storify</h1>
<div id="StoryActions">
<div>
<a href="#" class="btn btn-success .btn-large" id="BtnCreateStory">
<div id="NewStoryBtn">
<span id="create">CREATE</span><p id="newstory">New Story</p>
</div>
</a>
<a href="#" class="btn" id="BtnJoin">
<div id="JoinStoryBtn">
<span id="create">JOIN</span><p id="newstory">Existing Story</p>
</div>
</a>
<p id="registration">no registration required</p>
<div id="StoryDescription">
<p> </p>
<p>Storify is a <strong>fun</strong>, group <strong>writing game</strong>
taking inspiration from the story writing game that you may have played at a party or at school with friends.</p>
<p>Each person writes a random sentence to form part of a story.</p>
<p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p>
<p>Storify is great for playing with your Internet friends or Co-workers.</p>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<!-- Running Stories -->
<div class="span3"> </div>
<div class="span3">
<div id="stories">
I want to write a really long story here and see how far it goes down the path
</div>
</div>
</div>
</div>
最佳答案
Bootstrap 网格系统使用 12 列,这意味着在您设计的每一行中,最顶层行内的列总和应等于 12 或更少。嵌套行中的列的总和应等于嵌套行的列的大小。
你的例子的简化方案是这样的:
<div class="row">
<!-- welcome container -->
<div class="span8" id="welcome">
...
<div class="row">
<div class="span6">
<!-- Running Stories -->
<div class="span3"> </div>
<div class="span3">
<div id="stories">
I want to write a really long story here and see how far it goes down the path
</div>
</div>
</div>
</div>
有几个错误。
- span8 div 未正确关闭。有一个多余的 row div,而不是它的结束标记。
- 最高层的列总和为 14 (span8 + span6),这太多了。
- 两个嵌套列 span3 未在另一行 中关闭。
这是固定版本,我将右列缩小为 span4,因此总和等于 12。同样,我缩小了嵌套列的大小。
<div class="container">
<div class="row">
<!-- welcome container -->
<div class="span8" id="welcome">
<h1>Storify</h1>
<div id="StoryActions">
<div>
<a href="#" class="btn btn-success .btn-large" id="BtnCreateStory">
<div id="NewStoryBtn">
<span id="create">CREATE</span><p id="newstory">New Story</p>
</div>
</a>
<a href="#" class="btn" id="BtnJoin">
<div id="JoinStoryBtn">
<span id="create">JOIN</span><p id="newstory">Existing Story</p>
</div>
</a>
<p id="registration">no registration required</p>
<div id="StoryDescription">
<p> </p>
<p>Storify is a <strong>fun</strong>, group <strong>writing game</strong>
taking inspiration from the story writing game that you may have played at a party or at school with friends.</p>
<p>Each person writes a random sentence to form part of a story.</p>
<p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p>
<p>Storify is great for playing with your Internet friends or Co-workers.</p>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="row">
<!-- Running Stories -->
<div class="span2"> </div>
<div class="span2">
<div id="stories">
I want to write a really long story here and see how far it goes down the path
</div>
</div>
</div>
</div>
</div>
关于css - 无法获取页面最右侧的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11416551/