Bootstrap - 容器流体的对齐问题

Posted 2023-02-24

【中文标题】Bootstrap - 容器流体的对齐问题

【英文标题】：Bootstrap - alignment issues with container-fluid

【发布时间】：2013-03-07 11:06:26

【问题描述】：

我有一个漫画网站http://hittingtreeswithsticks.com，并希望为我的标题保持 100% 的宽度（因此它在任何浏览器上都可以拉伸 100%），但我的内容的宽度是固定的（希望保持固定的 950 像素宽度） .

因此，我将页眉和页脚放在<div class="container-fluid"> 中，将主要内容放在<div class="container"> 中来实现。

我一直在 1920 x 1080 分辨率的 IE9、Chrome 和 FireFox 上进行本地测试，标题看起来不错。

但是当我在较小的显示器上进行测试时，1366 x 768，标题项目似乎混合在一起。

在 header.php 文件中，我为标题徽标和链接设置（简化）

<div class="container-fluid">
   <div id="header">
     <div class="row-fluid">
       <div class="span3 offset3">
         <logo>
       </div>
       <div class="span1">
        <comics link>
       </div>
       <div class="span1">
        <about link>
       </div>
      And so on...

在 header.php 中，我放置了一个开头 <div class="container">，这样所有其他包含该标题的模板都将位于 containter 而不是 container-fluid。

任何想法为什么会发生这种情况？

谢谢！

【问题讨论】：

我看到你的标题有很多问题，有没有办法改变它的结构？如果是这样，我可以为您提供一些适合您需要的建议

【参考方案1】：

您没有为内容设置最小宽度，因此浏览器会将其“混合”以使其适应较小的分辨率。

您可以尝试使用 CSS 规则，例如

#header  min-width: 1000px;  

（1000px 在这里是任意的）。这将防止标题换行到两行，但显然会导致它的某些部分超出较小屏幕的可见区域。

编辑：如果您提供代码或工作页面的链接，我们将能够查看是否存在影响这一点的填充/边距。

【讨论】：

我提供了我网站的链接

【参考方案2】：

尝试在您的comic_style.css 中更改#header 元素中的溢出属性

#header 
background: url("images/SiteDesign/Comic_Header.png") repeat scroll 0 0 transparent;
height: 50px;
overflow: auto;scroll;

或者 bootstrap.css 中的 img 标签可能会造成问题

img 
    border: 0 none;
    height: auto;
    vertical-align: middle;

为标题图像创建另一个标签

【参考方案3】：

首先不要在 bootstrap.css 中弄乱任何东西，通过编写新的 css 类或类似的东西来纠正某些问题也不是那么聪明。

换句话说，不要试图通过 css 来解决这个问题，因为你以后会遇到更多问题。

所以我们开始

<div class="container-fluid">

必须在下面而不是在顶部。

<div id="header">

你不需要那个 div，除非你想要一个任何东西

注意偏移量，如果尝试类似的方法：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">

最重要的是要记住，如果您为其他尺寸修复某些东西，那么您必须为其他尺寸做它等等。这意味着您不会响应！

我的建议是尝试使用 div 类的顺序，而不是使用 css。

【参考方案4】：

我查看了您页面上的代码，我相信这可以解决您的问题：

<div id="header">
   <div style="width: 950px;margin-left: auto;margin-right: auto;left: 0;right: 0;">
      <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="logo" src="./images/SiteDesign/Logo_Small.png" > </a> &nbsp;
      <div class="comicsSite" style="display: inline; background-clip: padding-box; padding-bottom: 15px;">  <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" > </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=about&amp;page=1&amp;site=about"> <img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" > </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=homepage&amp;page=1&amp;site=artwork"> <img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" > </a> </div>
   </div>
</div>

【参考方案5】：

您可以使用引导导航元素，而不是使用跨度：

    <div class="navbar>
      <div class="navbar-inner">
        <div class="container-fluid">
          <ul class="nav">
    <li><a href="#">Charts</a></li>
    <li><a href="#">Life</a></li>
    <li><a href="#">Office</a></li>
            <li><a href="#">Political</a></li>
            <li><a href="#">Misc</a></li>
      </ul>
     </div>
       </div>
    </div>