It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center
                            
                        
                    
                
                                7年前关闭。
            
                    
我正在使用Bootstrap创建个人网站,并且想要创建以下特定布局:

html - 三个12列网格并排使用twitter bootstrap-LMLPHP

每个部分的宽度为940像素,包含12列,因此当3个部分的屏幕视图中的1个隐藏时,其他2个部分却被隐藏,我该如何执行此操作?

非常感谢您的所有帮助!

最佳答案

给定默认的12列引导网格,并带有以下标记:



<div class="container supercontainer">
    <div class="supercontainer-inner clearfix view-1">
        <div class="container"><div class="row"><div class="span12"><p>Grid 1</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 2</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 3</p></div></div></div>
    </div>
</div>


和这个CSS:

.supercontainer {
    overflow-x: hidden;
}
.supercontainer-inner {
    width: 2820px;
  -webkit-transition: margin-left 0.35s ease;
     -moz-transition: margin-left 0.35s ease;
       -o-transition: margin-left 0.35s ease;
          transition: margin-left 0.35s ease;
}
.supercontainer-inner > .container {
    float: left!important;
}


.supercontainer-inner.view-1 { margin-left: 0; }
.supercontainer-inner.view-2 { margin-left: -940px; }
.supercontainer-inner.view-3 { margin-left: -1880px; }


请记住,使用轮播样式表可以实现更好的效果。

检查demo (jsfiddle),查看一个可能的应用程序以切换视图。



这是on jsfiddle的响应版本。

但这需要对LESS脚本进行一些清理,并为视图数添加变量(并且可能只是扩展基本网格..嗡嗡声)。

@media (min-width: 1200px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -1170px; }
    .supercontainer-inner.view-3 { margin-left: -2340px; }
    .supercontainer-inner {
        width: 3510px;
    }
}
@media (max-width: 979px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -724px; }
    .supercontainer-inner.view-3 { margin-left: -1448px; }
    .supercontainer-inner {
        width: 2172px;
    }
}
@media (max-width: 767px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -100%; }
    .supercontainer-inner.view-3 { margin-left: -200%; }
    .supercontainer-inner {
        width: 300%;
    }
    .supercontainer-inner >.container { width: 33.33%!important; }
}

关于html - 三个12列网格并排使用twitter bootstrap ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13055569/

10-12 12:51
查看更多