在bootstrap 3中通过一列移动缩略图库

Question

<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>

我需要在缩略图库上移动一列。我尝试了许多不同的方法，但一切都搞砸了缩略图库本身的布局。我在这里发布了这段代码，但我认为访问网站更容易看到我在说什么http://velnikolic.com/video/portfolio.html

Answer 1

你的问题不在于移动你的画廊一列，而是一个更好的bootstrap 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>

修改

要向图库添加更多装订线，请按如下方式修改缩略图引导类。同时将溢出隐藏到sidenav容器将阻止它泄漏到下一个col-sm - *。

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