0
嗨，大家好我即將在bootstrap中遇到這樣的問題，當我恢復瀏覽器時，除了第一個孩子以外，我的所有內容都在中心。但是當我禁用.row-fluid [class * =「span」]時：第一個孩子回到頁面的中心。有沒有辦法在我自己的CSS這樣做呢？margin-left with row-fluid overwrite Twitter Bootstrap
<body>
<div class="body-wrapper">
<header >
<h1>The Store</h1>
<div class="nav-container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Home</a>
<ul class="nav">
<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="#">TRAVEL</a></li>
<li><a href="#">LIMITED EDITION</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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
</body>
CSS
body,html{
margin: 0;
padding: 0;
}
body{
margin:0 auto;
max-width: 950px;
min-width: 300px;
}
.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;}
![enter image description here][1]
IM在引導感謝一個新手在您的幫助
您可以創建一個小提琴？這是很多html/css – karthikr
http://jsfiddle.net/F6qJb/在這裏它是 – Aoi
@Aoi你想'Home'出現與列表的其餘部分對齊？ – sdasdadas