自举响应流体布局

时间:2014-09-23 13:24:07

标签: html css twitter-bootstrap responsive-design

我已经开始使用bootstrap创建网站设计,需要一些帮助。我有6个容器,我需要安排(和缩放)不同的屏幕尺寸,但我不能让它工作。

我想要不同的屏幕设计(以像素为单位):

  • 992px及以上
  • 768px至991px
  • 480像素-766px
  • 小到439px

我想将我的页面组件排列如下图: layouts for different screen sizes

我该怎么做?我是否需要创建4种不同的布局并使用隐藏类来阻止要显示的布局?在更新内容时,这似乎很多工作。或者我可以用一些引导黑魔法来做到这一点吗?

4 个答案:

答案 0 :(得分:2)

我认为你必须在bootstrap之上使用一些自定义css,或者定义一些媒体查询来改变不同窗口大小的类样式的定义。

我的建议是看看Bootstrap 3是如何做出合理的导航的。当视口宽度减小时,它们以类似的方式变化。

http://getbootstrap.com/components/#nav-justified

答案 1 :(得分:1)

你使用什么引导程序? 无论如何,我会帮助你。假设你使用3.2.0 ...

http://www.bootply.com/krobF8P83o

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12">
      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
      </div>
    </div>
    <div class="col-lg-6 col-md-4 col-sm-12 col-xs-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div>
      </div>
    </div>
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分:0)

bootstrap最低可能宽度为768px,超出此范围,所有内容都将处理相同。

但您可以将多个col-width类分配给一行中的一个div。

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                A
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                B
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                C
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                D
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6">
        E
        </div>
        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6">
        F
        </div>
    </div>

答案 3 :(得分:0)

这绝对有可能。 Here是一个小提琴和一个video demo。您只需要customize Bootstrap在自定义像素维度插入媒体查询断点,并调整相同媒体查询的单元格高度(为了使E == A + C == B + D)

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-12">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>A</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>B</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>C</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>D</span></div>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-6"><span>E</span></div>
        <div class="col-md-12 col-lg-6"><span>F</span></div>
    </div>
</div>

CSS:

span {
    display: block;
    float: left;
    width: 100%;
    padding: 100px 0;
    border: 5px solid black;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}
.row {
    margin: 0;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding: 0;
    margin: 0;
}