こんにちは、ブートストラップでこの種の問題が発生しています。ブラウザーを復元すると、最初の子を除くすべてのコンテンツが中央に表示されます。しかし、.row-fluid [class*="span"]:first-child を無効にすると、最初の子はページの中央に戻ります。自分の css にこのことができる方法はありますか?
<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]
私はブートストラップの初心者です、あなたの助けを前もって感謝します