0

布局似乎很简单，但故障排除似乎超出了我的 css 和 bootrstap 技能 -

我正在尝试使用带有渐变背景的全角 div - #topwrapper，然后它将保持另一个固定尺寸（span12 = 1170px）居中的 div - #headerimage。目标是让#headerimage div随着浏览器大小的调整而缩放。

问题是，由于某种未知原因，#headerimage 被推到左侧而不是居中。

这是代码：

<div class="container" id="topwrapper">
   <div class="row-fluid">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

#topwrapper {
    width:100%;
    height:270px;
    background:url(../img/tophead-wrapper-bg.png) repeat transparent;   
}

#headerimage {
    background:url(../img/thbg01.jpg) no-repeat transparent;   
    height:270px;
    margin:0 auto;
}

这是相关页面的链接：http: //kh.kagyu.org。忽略红条下方的任何内容

有谁知道这个问题的解决方案？

4

2 回答 2

1

如果你想要一个流畅的布局，你需要使用类container-fluid而不是仅仅container。（确保你bootstrap-responsive.css在项目中包含了文件）

<div class="container-fluid" id="topwrapper">
   <div class="row-fluid">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

如果你想要一个固定的布局，那么-fluid从container和 中删除row。

<div class="container" id="topwrapper">
   <div class="row">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

添加text-align:center以使文本居中。您可以删除margin: 0 auto;，如果您正在使用span12该类，则该 div 将由引导网格系统居中。

#headerimage {
    background:url(../img/thbg01.jpg) no-repeat transparent;   
    height:270px;
    text-align:center;
}
于 2013-09-26T03:12:01.600 回答
0

the container class adds margin and width centering whatever you have in it, the correct way to do this would be the following layout, the text-center class adds text-align:center therefore centering your image, hope it helps!

<div id="topwrapper">
   <div class="container">
      <div class="row-fluid">
         <div class="span12 text-center" id="headerimage">PLEASE CENTER</div>
      </div>
   </div>
</div>
于 2013-09-26T03:59:21.613 回答