Css 在引导3中将缩略图库移动一列 /*导航*/ #标志{宽度：248px； 垫底：25px； 填充顶部：25px； } .navbar nav>li>a{ 右边距：-75px； 边缘底部：10px； 填充顶部：10px； 垫底：10px； 文本转换：大写； } .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{ 背景：黑色； 颜色：白色； } @介质（最小宽度：768px）{ .导航栏倒塌{ 高度：自动； 边界顶部：0； 盒影：无； 最大高度：无； 左侧填充：0； 右边填充：0； } .navbar-collapse.collapse{ 显示：块！重要； 宽度：自动！重要； 填充底部：0； 溢出：可见！重要； 背景：白色； } .navbar-in{ 溢出x：可见； } navbar先生 { 最大宽度：250px； 保证金：0自动； 边界半径：0； 边界：0； } .导航栏导航， .navbar nav>li， .导航栏左侧， .导航栏对， .导航栏标题 {float:无！重要；} .navbar right.下拉菜单{left:0；right:auto；} .导航栏折叠.导航栏导航.导航栏右侧：最后一个子项{ 右边距：0； } .sidebar导航{背景：白色} } 切换导航 边栏菜单

我需要在缩略图库上移动一列。我尝试了许多不同的方法，但一切都弄乱了缩略图库本身的布局。我在这里发布了这段代码，但我认为访问该网站更容易了解我所说的内容

---

你的问题不在于把你的图库移到一列上，而是一个更好的引导html架构。您声明您的侧边栏将占用col-sm-3，但图库不会占用其余部分（col-sm-9）。这样做，然后，再次在内部重新分布列，以在您想要的布局中显示（3或4列），这并不重要

我用你的密码为你做的

这是我建议你做的。它将把你所有的元素集中起来，以使用你大部分的浏览器空间，并按比例固定你的排水沟，这样就不会有任何东西对一边或另一边太重

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

---

你的问题不在于将你的图库移到一列上，而是一个更好的引导html架构。您声明您的侧边栏将占用col-sm-3，但图库不会占用其余部分（col-sm-9）。这样做，然后，再次在内部重新分布列，以在您想要的布局中显示（3或4列），这并不重要

我用你的密码为你做的

这是我建议你做的。它将把你所有的元素集中起来，以使用你大部分的浏览器空间，并按比例固定你的排水沟，这样就不会有任何东西对一边或另一边太重

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

---

.col xs offset-*应该起作用。不起作用，因为导航位于一侧，并且公文包部分由几个作为一个单元工作的小列组成。col xs offset-*应该起作用。不起作用，因为导航位于一侧，公文包部分由几个作为一个单元工作的小列组成。我看到了什么您所说的是html架构，但这本质上提供了相同的美学效果。设计看起来杂乱无章，导航和缩略图之间没有额外的空间，一根柱子的偏移破坏了画廊的布局。你所要做的就是确定宽度和边距。我更新了密码笔。噢，把你的导航修好，这样它就不会漏水。导航漏水是客户的设计选择。我加了一张照片，让你明白我的意思。基本上，绿色区域总共应该是8列，并且偏移1。我知道这个设计看起来总共只有9列，但是客户问我是否可以在两个部分之间增加更多的空间（大约1列的价值），我希望图片能让它更清晰？啊，我只需要“col-sm-push-1”就可以了，它没有把任何事情搞砸。谢谢你的努力。如果你认为有更好的方法来利用引导而不是推动，我很乐意听到它，但我认为推动是我一直在寻找的。这一直在我的脑海里，但我不喜欢提供太多，因为10次中有9次大多数人不需要它，它最终是一个简单的架构。既然你已经决定走这条路，在更大的布局上重置推送，推送只适用于指定的列smI，看看你在说什么html架构，但是

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