7

我正在尝试制作一个引导响应式布局。在这里，我正在尝试缩短主容器 div 的宽度。我尝试设置内联宽度，但布局失去了响应性。当我检查 bootstrap.css 时，容器 div 的宽度是自动的。如果有人能揭示这背后的逻辑，我将不胜感激。以下是引导程序的演示代码。

PS - 我不想缩短 navbar-fixed 类的宽度，我只想缩短容器的宽度而不失去响应能力。

HTML

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <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>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

<div class="container" >

  <!-- Main hero unit for a primary marketing message or call to action -->
  <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>

  <!-- Example row of columns -->
  <div class="row">
    <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>
    <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>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

  <hr>

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

</div>

CSS

  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
  }
  .container {
    width: auto;
  }

截屏

截图 http://img442.imageshack.us/img442/7074/testjxk.jpg

4

3 回答 3

8

在 bootstrap-responsive.css 文件中，您将找到代码块，称为媒体查询，例如

@media (max-width: 480px) {
  /* Your CSS here */
}

和

@media (min-width: 768px) and (max-width: 980px) {
  /* Your CSS here */
}

您可以将内容区域的宽度设置为这些块内每个屏幕宽度的适当宽度，而不会影响其他块。

于 2012-07-23T16:08:03.913 回答
4

尝试这个

  .container {
    width: auto;
    margin-left: 200px;
    margin-right: 200px;
  }​
于 2012-07-23T09:11:52.697 回答
0

为了让它看起来响应，您可以创建#page-wrap和使用max-width: 1200px; margin: 0 auto;，或者您可以将其仅应用于内容。所以看起来像这样

HTML

<div ID="page-wrap">
 <!-- CONTENT -->
</div>

CSS

#page-wrap {
 max-width: 1200px;
 margin: 0 auto;
}
于 2012-07-24T03:30:49.157 回答