it-swarm.com.de

Wie wird die Breite der Container-Div festgelegt, während ein auf Bootstraps reagierendes Layout erstellt wird?

Ich versuche, ein ansprechendes Bootstrap-Layout zu erstellen. Hier versuche ich, die Breite des Hauptcontainerdivs zu verkürzen. Ich habe versucht, die Breite inline einzustellen, aber das Layout hat seine Reaktionsfähigkeit verloren. Wenn ich die bootstrap.css überprüft habe, wird die Breite für das Container-Div automatisch angegeben. Ich wäre sehr dankbar, wenn jemand die Logik dahinter enthüllen könnte. Es folgt der Demo-Code von Bootstrap.

PS - Ich möchte die Breite der Klasse mit fester Navigationsleiste nicht verkürzen, ich möchte nur die Breite des Containers verkürzen, ohne die Reaktionsfähigkeit zu verlieren.

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

Bildschirmfoto

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

7
Bala

In der Datei bootstrap-responsive.css finden Sie Codeblöcke, die als Medienabfragen bezeichnet werden

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

und

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

Sie können die Breite des Inhaltsbereichs für jede Bildschirmbreite in diesen Blöcken auf die entsprechende Breite einstellen, ohne die anderen Blöcke zu beeinflussen.

8
chris vdp

versuche dies

  .container {
    width: auto;
    margin-left: 200px;
    margin-right: 200px;
  }​
4
osyan

Um es reaktionsschnell aussehen zu lassen, können Sie #page-wrap erstellen und max-width: 1200px; margin: 0 auto; verwenden, oder Sie können es nur auf den Inhalt anwenden. also würde es so aussehen

HTML

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

CSS

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