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

我正在尝试制作一个自举响应式布局.这里我想要的是缩短主容器div的宽度.我尝试设置内联宽度,但布局失去了响应性.当我检查bootstrap.css时,容器div的宽度是自动给定的.如果有人能透露这背后的逻辑,我真的很感激.以下是bootstrap的演示代码.

PS – 我不想缩短导航栏固定类的宽度,我只是想缩短容器的宽度而不会失去响应能力.

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,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,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;
  }

截图

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

解决方法

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

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

和

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

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

原文地址：https://www.jb51.cc/css/215213.html