发表新帖
发表新帖

Full width layout with twitter bootstrap

前端 未结
关注
10 538
不知归路
不知归路 2021-01-29 19:37

I\'m trying to accomplish a layout similar to this one: http://dribbble.com/shots/829195-Slate/attachments/86422

My project uses Twitter Bootstrap with responsive desig

相关标签:
10条回答
  • 感情败类
    2021-01-29 19:50

    Because the accepted answer isn't on the same planet as BS3, I'll share what I'm using to achieve nearly full-width capabilities.

    First off, this is cheating. It's not really fluid width - but it appears to be - depending on the size of the screen viewing the site.

    The problem with BS3 and fluid width sites is that they have taken this "mobile first" approach, which requires that they define every freaking screen width up to what they consider to be desktop (1200px) I'm working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width.

    They have defined 10 screen widths (really only 5, but anyway). I don't really feel comfortable changing those, because they are common widths. So, I chose to define some extra widths for BS to choose from when deciding the width of the container class.

    The way I use BS is to take all of the Bootstrap provided LESS files, omit the variables.less file to provide my own, and add one of my own to the end to override the things I want to change. Within my less file, I add the following to achieve 2 common screen width settings:

    @media screen and (min-width: 1600px) {
    .container {
        max-width: (1600px - @grid-gutter-width);
    }
}
@media screen and (min-width: 1900px) {
    .container {
        max-width: (1900px - @grid-gutter-width);
    }
}

    These two settings set the example for what you need to do to achieve different screen widths. Here, you get full width at 1600px, and 1900px. Any less than 1600 - BS falls back to the 1200px width, then to 768px and so forth - down to phone size.

    If you have larger to support, just create more @media screen statements like these. If you're building the CSS instead, you'll want to determine what gutter width was used and subtract it from your target screen width.

    Update:

    Bootstrap 3.0.1 and up (so far) - it's as easy as setting @container-large-desktop to 100%

    0 讨论(0)
  • 轮回少年
    2021-01-29 19:50

    In Bootstrap 3, columns are specified using percentages. (In Bootstrap 2, this was only the case if a column/span was within a .row-fluid element, but that's no longer necessary and that class no longer exists.) If you use a .container, then @Michael is absolutely right that you'll be stuck with a fixed-width layout. However, you should be in good shape if you just avoid using a .container element.

    <body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

    The margin for the body is already 0, so you should be able to get up right to the edge. (Columns still have a 15px padding on both sides, so you may have to account for that in your design, but this shouldn't stop you, and you can always customize this when you download Bootstrap.)

    0 讨论(0)
  • 一个人的身影
    2021-01-29 19:52

    Here is an example of a 100% width, 100% height layout with Bootstrap 3.

    http://bootply.com/tofficer/77686

    0 讨论(0)
  • 忘了有多久
    2021-01-29 19:56

    The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this. You get again a container-fluid :

    .container{
  max-width:100%;
  padding:0;
}
    0 讨论(0)
  • 长情又很酷
    2021-01-29 19:57

    I think you could just use class "col-md-12" it has required left and right paddings and 100% width. Looks like this is a good replacement for container-fluid from 2nd bootstrap.

    0 讨论(0)
  • 滥情空心
    2021-01-29 19:57

    Just create another class and add along with the bootstrap container class. You can also use container-fluid though.

    <div class="container full-width">
    <div class="row">
        ....
    </div>
</div>

    The CSS part is pretty simple

    * {
    margin: 0;
    padding: 0;
}
.full-width {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

    Hope this helps, Thanks!

    0 讨论(0)
 看不清?
提交回复
热议问题