css - 在 twitter bootstrap 中将 row-fluid 居中

Question

嘿伙计们，如果浏览器处于正常宽度（例如 1800 像素宽的屏幕），我的 twitter 引导程序有这个问题，关于如何将它们居中。

<div class="body-wrapper">
  <header>
    <div class="nav-container">
      <div class="navbar">
          <div class="navbar-inner">

            <a class="brand" href="#">E-Store</a>

            <button type="button" 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>
            </button>



            <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="#">HOME</a></li>
              <li><a href="#">BACKPACK</a></li>
              <li><a href="#">MESSENGERS</a></li>
              <li><a href="#">OUTDOOR PACKS</a></li>
              <li><a href="#">LAPTOP</a></li>
              <li><a href="#">BUSINESS</a></li>
            </ul>
          </div>
      </div>
    </div>
  </header>


  <div class="ad-container">
    <img src="images/sample-ad.png" />
  </div>


  <section class="main-content">

    <div class="carousel-wrap clearfix">
      <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item">
            <img src="images/bag.jpg" />

            <div class="carousel-caption">
              <h4>Lorem ipsum dolor sit amet</h4>
              <p>
                 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
              </p>
            </div>
          </div>
          <div class="item">
            <img src="images/shoes.jpg" />
            <div class="carousel-caption">
              <h4>Sed ut perspiciatis unde </h4>
              <p>
                 omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,  
              </p>
            </div>
          </div>
          <div class="item">
            <img src="images/laptop.jpg" />
            <div class="carousel-caption">
              <h4>Excepteur sint occaecat</h4>
              <p>
                 sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad   
              </p>
            </div>
          </div>
        </div>
        <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
      </div>
    </div>

    <div class="product-preview-wrapper">

        <div class="product-laptops-wrapper">
          <div class="row-fluid">
            <div class="span2 clearfix">
              <span>
                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
              </span>
              <a href="#"><img src="images/macbookair.jpg"/></a>
            </div>
            <div class="span3 clearfix">
              <span>
                 similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
              </span>
              <a href="#"><img src="images/macbookpro.jpg"/></a>
            </div>
            <div class="span4 clearfix">
              <span>
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </span>
              <a href="#"><img src="images/bag1.jpg"/></a>
            </div>
          </div>
        </div>

          <div class="backpack-wrapper ">
            <div class="row ">
              <div class="span4 clearfix">
                 <span>
                   laborum Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
                   sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                   <a href="#">Read more...</a>
                </span> 
                <div class="image-container">
                  <a href="#"><img src="images/backpack1.jpg"/></a>
                </div>
              </div>

              <div class="span8 clearfix">

                <span>
                   sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                   sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                   <a href="#">Read more...</a>

                </span>
                <div class="image-container">
                  <a href="#"><img src="images/backpack2.jpg"/></a>
                </div> 
              </div>
            </div>
          </div>
          <div class="contact-wrapper clearfix">
            <div class="row-fluid">
              <div class="span4 clearfix">
                <span>
                  laborum Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

                  <h4><a href="#">Give Aways</a></h4>
                </span>        

              </div>
              <div class="span4 clearfix">
                <span>
                  sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                  <h4><a href="#">Contact Us</a></h4>
                </span> 
              </div>

              <div class="span4 clearfix">
                <span>
                  sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                  <h4><a href="#">Discounts</a></h4>
                </span>


              </div>
              <div class="span4 clearfix">
                <span>
                  sint occaecat Excepteur cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                  <h4><a href="#">Shop Online</a></h4>
                </span>


              </div>
            </div>
          </div>

    </div>

  </section>

  <footer>
    <div class="nav-footer clearfix">
      <div>
        <h5>Macs</h5>
        <ul>
          <li><a href="#">MacBook Air</a></li>
          <li><a href="#">MacBook Pro</a></li>
          <li><a href="#">Mac mini</a></li>
          <li><a href="#">Mac mini server</a></li>
          <li><a href="#">iMac</a></li>
          <li><a href="#">Mac Pro</a></li>
        </ul>

        <h5>Considering a Mac</h5>
        <ul>
          <li><a href="#">Why love a Mac</a></li>
          <li><a href="#">Compare all Macs</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Try a Mac</a></li>
        </ul>

      </div>

      <div>
        <h5>Accessories</h5>
        <ul>
          <li><a href="#">Magic Mouse</a></li>
          <li><a href="#">Magic Trackpad</a></li>
          <li><a href="#">Apple Wireless Keyboard</a></li>
          <li><a href="#">Thunderbolt Display</a></li>
          <li><a href="#">AirPort Express</a></li>
          <li><a href="#">AirPort Extreme</a></li>
          <li><a href="#">Time Capsule</a></li>
        </ul>

        <h5>OS X</h5>
        <ul>
          <li><a href="#">OS X Mountain Lion</a></li>
          <li><a href="#">OS X Server</a></li>
        </ul>
      </div>  

      <div>
        <h5>Applications</h5>
        <ul>
          <li><a href="#">iLife </a></li>
          <li><a href="#">iWork </a></li>
          <li><a href="#">iBooks Author </a></li>
          <li><a href="#">Aperture </a></li>
          <li><a href="#">Final Cut Pro </a></li>
          <li><a href="#">Motion </a></li>
          <li><a href="#">Compressor </a></li>
          <li><a href="#">Logic Pro </a></li>
          <li><a href="#">MainStage </a></li>
          <li><a href="#">Remote Desktop </a></li>
          <li><a href="#">Safari </a></li>
          <li><a href="#">QuickTime </a></li>
          <li><a href="#">Mac App Store </a></li>
        </ul>
      </div>  

      <div>
        <h5>Markets</h5>
        <ul>
          <li><a href="#">Business </a></li>
          <li><a href="#">Creative Pro </a></li>
          <li><a href="#">Education </a></li>
          <li><a href="#">Students </a></li>
        </ul>

        <h5>Support</h5>
        <ul>
          <li><a href="#">AppleCare</a></li>
          <li><a href="#">Online Support</a></li>
          <li><a href="#">Telephone Sales</a></li>
          <li><a href="#">Genius Bar</a></li>
        </ul>

      </div>  

    </div>

  </footer>

</div>

CSS

body,html{

    margin: 0;
    padding: 0;
}

body{
    margin:0 auto;
    max-width: 950px;
    min-width:  300px;
}

body .row-fluid [class*="span"]:first-child {
    margin-left: auto;
}

.body-wrapper{

    width:  100%;
}

.clearfix:after{
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

header{min-height:  100px;}

.nav-container{
    float:  left;
    margin: 80px 0 0 0;
    width:  100%;
}

.ad-container{min-height: 150px;}

.ad-container img{
    height: 150px;
    width:  100%;
}

.carousel-wrap{
    border: 1px solid #ddd;
    min-height: 400px;
    margin: 20px 0 20px 0;
}

.carousel{

    margin-bottom: 0;
}
.carousel-control-wrap{margin-top:  200px; }

.carousel-inner img{
    height: 400px;
    width:  100%;
}


.row-fluid {
    margin: 0 auto;
    max-width: 950px;
    min-width: 300px;
}

.row-fluid .span2,.row-fluid .span3,.row-fluid .span4{
    border: 1px solid #ddd;
    margin: 5px;
    min-height: 200px;
    max-width:  316px; 
}

.row-fluid .span2:nth-of-type(1){

    margin-left: 0;
}




.row{margin: 20px 0 0 0;}


.row .span4,.row .span8{
    border: 1px solid #ddd;
    margin: 0 0 20px 24px;
    max-height: 800px;
    width:  46%;
}


.product-laptops-wrapper{
    margin: 0 auto;
    max-width:  950px;
    min-width:  200px;
}

.product-laptops-wrapper .span2,.product-laptops-wrapper .span3,.product-laptops-wrapper .span4{
    margin: 10px auto;
    min-width: 307px;
    padding: 0 5px 0 5px;   
    position: relative;
}

.product-laptops-wrapper span{
    font-size:  12px;
    position: absolute;
    text-align: center;
    padding-top: 5px;
}

.product-laptops-wrapper img{
    margin: 60px 0 0 60px;
    height: 120px;
    width: 150px;
}


.row  .image-container{
    min-width: 150px;
    max-width: 150px;
    float:left;
}

.backpack-wrapper{
    margin: 0 auto;
    max-width:  950px;
}

.backpack-wrapper .span4,.backpack-wrapper .span8{
    margin: 5px auto;
    max-width:  950px;
    min-width:  200px;
    position: relative;
    text-align: left;
}



.backpack-wrapper img{
    float: right;
    height: 180px;
    margin: 5px;
    min-width:  80px;
}

.backpack-wrapper span{
    padding: 5px;
    float: left;
    max-width: 240px;
}

.contact-wrapper{
    margin: 0 auto;
    max-width:  950px;
    min-width:  300px;
}

.contact-wrapper .span4{

    margin: 16px auto;
    max-width: 236.5px;
    min-width: 200px;

}

.row-fluid span{
    float:left;
    margin-left: 1px;
    min-width: 100px;
    padding: 20px;

    text-align: center;
}

.contact-wrapper .span4 a{text-align: center;}


footer{
    background-color: #DEFA70;
    border: 1px solid #DDD;
    min-height:320px;
    margin: 20px auto;
    max-width:  950px;
    min-width:  300px;
}

.nav-footer div{
    float: left;
    margin-left: 20px;
    width: 21%;
}

.nav-footer ul{list-style: none;}

问题是我将容纳行流体的包装器居中，但行流体本身我无法使其居中。请帮助大家提前谢谢。

PS：新手用 TWITTER BOOTSTRAP

css - 在 twitter bootstrap 中将 row-fluid 居中

0 回答 0

Related

Reference