0
我正在優化我的畫廊的移動解決方案，其中在col-sm-4一切工作完美，然後我需要添加col-xs-8 col-xs-offset-2，這使得它看起來像我想要的移動，但它弄亂大屏幕的樣子。爲什麼增加的xs值會影響較大視口處列的排列？添加xs值後在大屏幕上引導列混亂
#portfolio {
\t margin-top:50px;
\t padding-bottom:50px;
\t margin-bottom:50px;
}
.gallery {
\t margin-top:50px;
}
.gallery-item {
\t padding:0px;
\t border:1px solid white;
\t position:relative;
}
.gallery-overlay {
\t position:relative;
\t width:100%;
\t transition:1s;
}
.gallery-overlay img {
\t z-index:-1;
\t position:relative;
}
.gallery-overlay:hover {
\t background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.7)70%);
\t transition:1s;
}
.gallery-caption {
\t color:white;
\t top:75%;
\t text-transform:uppercase;
\t font-weight:bold;
\t position:absolute;
\t width:100%;
\t opacity:0;
\t z-index:102;
\t transition:1s;
}
.gallery-item:hover .gallery-caption{
\t display:block;
\t transition:1s;
\t opacity:1;
}<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>
\t <div id="portfolio" class="clearfix">
\t \t <div class="col-xs-12">
\t \t \t <div class="row text-center">
\t \t \t \t <h1>Some of Our Jobs as Students</h1>
\t \t \t \t <div class="separator"></div>
\t \t \t </div>
\t \t \t <!-- gallery starts -->
\t \t \t <div class="gallery clearfix col-xs-10 col-xs-offset-1">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a href="http://balazs.dk"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">Balazs' Portfolio</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a href="http://laszlovaszi.com/portfolio"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">Laszlo's portfolio</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-xs-8 col-xs-offset-2 col-sm-4 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a href="http://laszlovaszi.com/survey"><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">Survey made for Jokula</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <!-- new row starts -->
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a rel="portfolio" href="photos/office_woman_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">office woman</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a rel="portfolio" href="photos/laptop_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">laptop</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-4 col-xs-8 col-xs-offset-2 gallery-item">
\t \t \t \t \t \t <div class="gallery-overlay">
\t \t \t \t \t \t \t <a rel="portfolio" href="photos/glasses_woman_l.jpg" data-gallery><img class="img-responsive" src="http://lorempixel.com/500/500/" alt="thumbnail"></a>
\t \t \t \t \t \t \t <h3 class="gallery-caption text-center">glasses woman</h3>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <!-- gallery ends -->
\t \t </div>
\t </div>
'.col-xs-offset-2 {margin-left：16.6667％;}'This is創建問題..隱藏它.. – Sharon
使偏移量'col-xs-offset-4' – MAZux
@ user6028084，我看不到任何保留餘量被設置，你怎麼隱藏？ @MAZux，我已經嘗試了你的建議，但是它將縮略圖排列在單個列中，但我需要'col-sm-4'。爲什麼'xs'屬性會覆蓋'sm'？ – sklrboy