0
안녕하세요 얘들 아, 부트 스트랩에 이런 종류의 문제가 생겼다. 브라우저를 복원 할 때 모든 내용이 첫 번째 자식을 제외한 센터에있다. 하지만 .row-fluid [class * = "span"] : 첫 번째 자식을 비활성화하면 첫 번째 자식이 페이지의 중앙으로 돌아갑니다. 이 능력있는 내 자신의 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]
메신저 여러분의 도움이 방법에 대해
당신이 바이올린을 만들 수 있습니까? 그것은 html/css가 많이 있습니다 – karthikr
http://jsfiddle.net/F6qJb/ 여기가 – Aoi
입니다 @ 아오이'집 '이 나머지 목록과 정렬되어 보이길 원하십니까? – sdasdadas