ブートストラップ3のサムネイルギャラリーを1列で移動する

<style> 
/* Navigation */   
#logo{width: 248px; 
     padding-bottom:25px; 
     padding-top:25px; 
} 

.navbar-nav>li>a { 

    margin-right:-75px; 
    margin-bottom:10px; 
    padding-top:10px; 
    padding-bottom:10px; 
    text-transform:uppercase; 

} 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { 
    background: black; 
    color:white;  
} 

@media (min-width: 768px) { 
    .navbar-collapse { 
    height: auto; 
    border-top: 0; 
    box-shadow: none; 
    max-height: none; 
    padding-left:0; 
    padding-right:0; 
    } 
    .navbar-collapse.collapse { 
    display: block !important; 
    width: auto !important; 
    padding-bottom: 0; 
    overflow: visible !important; 
    background:white; 
    } 
    .navbar-collapse.in { 
    overflow-x: visible; 
    } 

.navbar 
{ 
    max-width:250px; 
    margin:0 auto; 
    border-radius:0; 
    border:0; 
} 

.navbar-nav, 
.navbar-nav > li, 
.navbar-left, 
.navbar-right, 
.navbar-header 
{float:none !important;} 

.navbar-right .dropdown-menu {left:0;right:auto;} 
.navbar-collapse .navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
} 


.sidebar-nav{background: white} 

} 

</style> 



<div class="container-fluid"> 
     <div class="col-sm-3"> 
      <div class="sidebar-nav"> 
       <div class="navbar navbar-default avbar-fixed-top" role="navigation"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
         <span class="visible-xs navbar-brand">Sidebar menu</span> 
        </div> 
        <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
         <ul class="nav navbar-nav"> 
         <img id="logo" src="assets/img/logo.jpg"/> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li class="filter" data-filter=".category-1"><a href="#">Animation</a></li> 
         <li class="filter" data-filter=".category-2"><a href="#">Commercial</a></li> 
         <li class="filter" data-filter=".category-3"><a href="#">Documentary</a></li> 
         <li class="filter" data-filter=".category-4"><a href="#">Film</a></li> 
         <li class="filter" data-filter=".category-5"><a href="#">Music</a></li> 
         <li class="filter" data-filter=".category-6"><a href="#">Video Games</a></li> 
         <li><a href="#">Services</a></li> 

         </ul> 
        </div><!--/.nav-collapse --> 
       </div> 
      </div> 
     </div> 



    <div id="portfolio"> 
     <div class="pContainer"> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 
       <div class="col-lg-2 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
        </a> 
       </div> 

      </div> 


    </div> 






     </div>

サムネイルギャラリーを1つの列に移動する必要があります。私はいろいろなやり方を試みましたが、サムネイルギャラリーそのもののレイアウトがすべて崩れてしまいました。私はここにこのコードを投稿が、私は私がおよそhttp://velnikolic.com/video/portfolio.html ブートストラップ3のサムネイルギャラリーを1列で移動する

出典

2016-11-27 Velibor Nikolic

.col-xs-offset- *はこのトリックを行う必要があります。 – Daerik

ナビゲーションが横にあり、ポートフォリオセクションがユニットとして機能するいくつかの小さな列で構成されているため、動作しません。 –

を話しているかを確認するためにウェブサイトを訪問する方が簡単だと思うあなたの問題は、上のあなたのギャラリーの列を移動するにはそれほどではありませんが、より良いブートストラップhtmlアーキテクチャあなたはあなたのサイドバーがcol-sm-3を占めるが、ギャラリーは残りのものを占めると宣言しなかった（col-sm-9）。それをやり直してから、あなたの希望するレイアウト（3列または4列）に表示するように列を内部に再配置しても問題はありません。私はここにあなたのコード

であなたのためにこれを作ったdemo

は、私はあなたが示唆するものです。それはあなたのブラウザの不動産のほとんどを使用するすべての要素を中心とし、比例的にあなたの溝を片付けることができます。

<div class="container-fluid"> 
    <div class="col-sm-3"> 
     <div class="sidebar-nav"> 
      <div class="navbar navbar-default avbar-fixed-top" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        <span class="visible-xs navbar-brand">Sidebar menu</span> 
       </div> 
       <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <img id="logo" src="assets/img/logo.jpg" /> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li class="filter" data-filter=".category-1"><a href="#">Animation</a></li> 
         <li class="filter" data-filter=".category-2"><a href="#">Commercial</a></li> 
         <li class="filter" data-filter=".category-3"><a href="#">Documentary</a></li> 
         <li class="filter" data-filter=".category-4"><a href="#">Film</a></li> 
         <li class="filter" data-filter=".category-5"><a href="#">Music</a></li> 
         <li class="filter" data-filter=".category-6"><a href="#">Video Games</a></li> 
         <li><a href="#">Services</a></li> 

        </ul> 
       </div> 
       <!--/.nav-collapse --> 
      </div> 
     </div> 
    </div> 

    <div class="col-sm-9"> 
     <div id="portfolio"> 
     <div class="pContainer"> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 
      <div class="col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="http://placehold.it/400x400" alt=""> 
       </a> 
      </div> 

     </div> 


    </div> 
    </div> 

    <video playsinline autoplay muted loop poster="polina.jpg" id="bgvid"> 
    <!--<source src="polina.webm" type="video/webm">--> 
    <source src="assets/videos/video.mp4" type="video/mp4"> 
</video> 


    <footer class="navbar navbar-fixed-bottom"> 
     <div class="footer-container container-fluid"> 
      <div class="social-links"> 
       <a href="#"><i class="fa fa-facebook fa-lg"></i></a> 
       <a href="#"><i class="fa fa-twitter fa-lg"></i></a> 
       <a href="#"><i class="fa fa-google-plus fa-lg"></i></a> 
       <a href="#"><i class="fa fa-pinterest fa-lg"></i></a> 
      </div> 
     </div> 
    </footer> 

</div>

EDIT

は、ギャラリーに多くの側溝を追加し、次のようにサムネイルブートストラップクラスを変更します。また、あなたのsidenavコンテナにオーバーフローを隠すことで、次のcol-sm- *への漏れを止めます。

.thumbnail { 
    max-width: 231px; 
    margin: 20px auto; 
} 
.sidebar-nav { 
    overflow: hidden; 
}

出典

2016-11-27 04:07:28 LOTUSMS

htmlアーキテクチャについては何を言っているのかは分かりませんが、基本的に同じ審美的な結果が得られます。デザインは、navとサムネイルの間に余分なスペースを必要とせずに乱雑に見え、1つの列で相殺するとギャラリーのレイアウトが壊れます。 –

あなたがしなければならないのは、幅とマージンを修正することだけです。私はcodepenを更新しました。ああ、それが漏れないようにあなたのnavを修正してください。 – LOTUSMS

nav leakは、クライアントによる設計上の選択でした。私はあなたが私が何を意味するかを見るために写真を追加しました。基本的に、緑色の領域は合計8列、オフセットは1でなければなりません。デザインは9列のように見えますが、クライアントは2つのセクション間にスペースを追加できるかどうか尋ねました（約1カラム分）絵はそれをより明確にしますか？ –

ブートストラップ3のサムネイルギャラリーを1列で移動する

答えて

関連する問題