Question

我正在针对移动分辨率优化我的图库，在col-sm-4一切正常，然后我需要添加col-xs-8 col-xs-offset-2，这使它看起来像我想要的移动设备，但它弄乱了大屏幕的样子。为什么添加的xs值会影响较大视口的列排列？

＆＃13;

#portfolio {
	margin-top:50px;
	padding-bottom:50px;
	margin-bottom:50px;
}

.gallery {
	margin-top:50px;
}

.gallery-item {
	padding:0px;
	border:1px solid white;
	position:relative;
}

.gallery-overlay {
	position:relative;
	width:100%;
	transition:1s;
}

.gallery-overlay img {
	z-index:-1;
	position:relative;
}

.gallery-overlay:hover {
	background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.7)70%);
	transition:1s;
}

.gallery-caption {
	color:white;
	top:75%;
	text-transform:uppercase;
	font-weight:bold;
	position:absolute;
	width:100%;
	opacity:0;
	z-index:102;
	transition:1s;
}

.gallery-item:hover .gallery-caption{
	display:block;
	transition:1s;
	opacity:1;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="more"></div>
	<div id="portfolio" class="clearfix">
		<div class="col-xs-12">
			<div class="row text-center">
				<h1>Some of Our Jobs as Students</h1>
				<div class="separator"></div>
			</div>
			<!-- gallery starts -->
			<div class="gallery clearfix col-xs-10 col-xs-offset-1">
				<div class="row">
					<div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<a href="http://balazs.dk"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
							<h3 class="gallery-caption text-center">Balazs' Portfolio</h3>
						</div>
						
					</div>
					<div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<a href="http://laszlovaszi.com/portfolio"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
							<h3 class="gallery-caption text-center">Laszlo's portfolio</h3>
						</div>
						
					</div>
					<div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<a href="http://laszlovaszi.com/survey"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
							<h3 class="gallery-caption text-center">Survey made for Jokula</h3>
						</div>
						
					</div>
				</div>
				<!-- new row starts -->
				<div class="row">
					<div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
						<div class="gallery-overlay">
							<a rel="portfolio" href="photos/office_woman_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
							<h3 class="gallery-caption text-center">office woman</h3>
						</div>
						
					</div>
					<div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
						<div class="gallery-overlay">
							<a rel="portfolio" href="photos/laptop_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
							<h3 class="gallery-caption text-center">laptop</h3>
						</div>
						
					</div>
					<div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
						<div class="gallery-overlay">
							<a rel="portfolio" href="photos/glasses_woman_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
							<h3 class="gallery-caption text-center">glasses woman</h3>
						</div>
						
					</div>
				</div>
			</div>
			<!-- gallery ends -->
		</div>
	</div>

＆＃13;

Answer 1

因为你的偏移是xs-2，因为你没有调整大屏幕的值，bootstrap仍然会在其他分辨率上应用偏移量。尝试添加一个.col-sm-offset-0，它将覆盖你的.col-xs-offset-2用于更大的屏幕

添加xs值后，大屏幕上的Bootstrap列无序

1 个答案: