CSS 如何在创建引导响应式布局时为容器 div 设置宽度？

How to set width to the container div while creating a bootstrap responsive layout?

提问by Bala

I am trying to make a bootstrap responsive layout. Here What I am trying is to short the width of the main container div. I tried setting width inline, but the layout lost its responsive nature. When I checked the bootstrap.css, the width for the container div is given auto. I would really appreciate if anyone can reveal the logic behind this. Following is the demo code of bootstrap.

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

PS - I don't want to shorten the width of the navbar-fixed class, I just want to shorten the width of the container without losing the responsiveness .

PS - 我不想缩短导航栏固定类的宽度，我只想在不失去响应性的情况下缩短容器的宽度。

HTML

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

CSS

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

Screenshot

截屏

Screenshot http://img442.imageshack.us/img442/7074/testjxk.jpg

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

回答by chris vdp

In the bootstrap-responsive.css file you will find code blocks, known as media queries, like

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

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

and

和

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

You can set the width of content area to the appropriate width for each screen width inside of these blocks without affecting the other blocks.

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

回答by osyan

try this

尝试这个

  .container {
    width: auto;
    margin-left: 200px;
    margin-right: 200px;
  }?

回答by phoxd

To make it look responsive you could create #page-wrapand use max-width: 1200px; margin: 0 auto;or you could apply it only to the content. so it would look like this

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

HTML

HTML

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

CSS

CSS

#page-wrap {
 max-width: 1200px;
 margin: 0 auto;
}