如何将设计从流体更改为固定[重复]答案

【问题标题】：How to change design from fluid to fixed [duplicate]如何将设计从流体更改为固定[重复]
【发布时间】：2012-10-17 04:40:06
【问题描述】：

可能重复：
twitter bootstrap, fluid vs fixed, then add in responsive, how does it all fit together?

这是我正在设计的设计演示

http://jsfiddle.net/U8HGz/1/show/#about

但是这个设计是流动的......我怎样才能让这个设计成为固定的？

以下是页面来源

    <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> web page</title>




      <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">



  <style type='text/css'>
    body {
    padding-bottom: 40px;
    padding-top: 60px;
}

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}





  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){


}//]]>  

</script>


</head>
<body>
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">

          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
      </div><!--/.nav-collapse -->

    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row-fluid row">
    <div class="span3">
      <div class="well sidebar-nav-fixed">
        <ul class="nav nav-list">

          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>

          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->

    <div class="span9 span-fixed-sidebar">
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>
      <div class="row-fluid">

        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div><!--/span-->
      </div><!--/row-->
      <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">

          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/span-->
  </div><!--/row-->

  <hr>

  <footer>
    <p>&copy; Company 2012</p>
  </footer>

</div><!--/.fluid-container-->

</body>


</html>

【问题讨论】：

它被否决的任何原因？
我没有投反对票，但我想这是因为Bootstrap docs 和How to change design from fluid to fixed bootstrap 的first result on Google 都回答了你的问题。

标签： css twitter-bootstrap fixed

【解决方案1】：

您正在 HTML 中使用 container-fluid 和 row-fluid 类。
Bootstrap 文档专门解释了如何使用default 和fluid 网格系统；你想要默认，即container和row。

摘录：

默认的 Bootstrap 网格系统使用 12 列，形成一个 940 像素宽的容器，而没有启用响应功能。

【讨论】：

感谢您的帮助。不过，我应该在发布问题之前阅读文件。我在设计方面的手很弱，所以当我害怕改变设计时，我通常会选择 SO。 :)
没问题，很高兴你成功了！

【解决方案2】：

Twitter 引导程序旨在响应。如果您想更改它，您需要下载 css 并将其放在您的服务器上以便您能够修改它。之后逐步消除所有使您的网站调整大小的因素。比如百分比宽度（100% 除外）等等。

没有简单的解决方案。

【讨论】：

感谢您的澄清。 +1 帮助我理解它。在设计方面，我实际上是零。让我试试。如果我失败了，我会用正确的代码和 css 编辑我的问题。
这是不正确的 - 你没有包括 responsive stylesheet 所以你的布局没有响应。