7

ブートストラップレスポンシブレイアウトを作成しようとしています。ここで私がしようとしているのは、メイン コンテナ div の幅を短くすることです。幅をインラインで設定しようとしましたが、レイアウトのレスポンシブ性が失われました。bootstrap.css を確認すると、コンテナ div の幅は auto になっています。誰かがこの背後にあるロジックを明らかにできれば、本当に感謝しています. 以下はブートストラップのデモコードです。

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 に答える