全宽布局与twitter启动 [英] Full width layout with twitter bootstrap

问题描述

我尝试完成类似以下布局的布局：
http：// dribbble。 com / shots / 829195-Slate / attachments / 86422

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

我的项目使用Twitter Bootstrap和响应式设计。可以使用Bootstrap实现全宽布局？

My project uses Twitter Bootstrap with responsive design. It is possible to implement a full width layout with Bootstrap?

问题是，从我已经阅读的流体布局将在bootstrap 3.0中删除，响应设计有固定的宽度。

The issue is that from what I've been reading fluid layouts will be removed in bootstrap 3.0, and the responsive design has fixed widths.

推荐答案

因为接受的答案不在BS3的同一个星球上，

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.

BS3和流体宽度网站的问题是，他们有采取这种移动第一的方法，这要求他们定义每个惊人的屏幕宽度，他们认为是桌面（1200像素）我在一个1900px宽屏幕的笔记本电脑上工作 - 所以我最终在任一边350像素

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.

他们定义了10个屏幕宽度（真正只有5个，但无论如何）。我真的不舒服改变这些，因为他们是共同的宽度。所以，我选择了定义一些额外的宽度，BS决定容器类的宽度时选择。

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.

我使用BS的方式是采取所有的Bootstrap提供LESS文件，省略variables.less文件提供我自己的，并添加一个自己到结束覆盖我想要改变的东西。在我的less文件中，我添加以下以实现2个常见的屏幕宽度设置：

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);
    }
}

这两个设置为您需要的示例做到实现不同的屏幕宽度。在这里，你得到全宽度在1600px和1900px。

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.

如果您有更大的支持，只需创建更多的@media这样的屏幕语句。如果你正在构建CSS，你需要确定使用的是什么水槽宽度，并从目标屏幕宽度减去它。

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.

更新：BS 3.0.1和up（到目前为止） - 很容易将@ container-large-desktop设置为100％

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

这篇关于全宽布局与twitter启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！