2014-10-11 60 views
1

我的问题是这样的,我尝试把一个大的漂亮矩形在我的网站, 的中间,但我不能从矩形的侧管理的空间,当我改变的大小窗户。 当我使用更改引导的网格时调整窗口大小

<div class=" col-md-12">...</div> 

我得到太少,填充比我想,而窗户是全屏, 而精填充从侧面时的“手机尺寸屏幕” 但是当我使用

<div class=" col-md-10 col-md-offset-1">...</div> 

这是在全屏幕精细填充,但股利太小,当窗口中,手机大小。

我该怎么办?

是否有posibility这两者结合起来?

回答

2

你有甚至阅读引导的文档?

http://getbootstrap.com/css/#grid

引导是专为这一点,但是,你需要告诉你的班吧。 MD代表中等设备...你也有sm这是电话。所以如果你想在手机上使用10个colums,请按照以下步骤进行。

<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>

如果这不是让你有(对SM的范围是991个至像素之间768px),使用XS类。

<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>

即与767个像素或更小的分辨率影响的设备。

所以要回到你的问题:他们在combineable? 是的,他们是

组合设置,你可以让你可以从1班组成..我不知道有多少,因为引导程序将根据屏幕的大小选择它需要的类。所以你可以添加类,它应该如何在大屏幕(col-lg)上显示超小型(col-x)。我会通过bootstrap网站上的示例进一步向您推荐文档。

Happy HTML'ing!

1

.col-md-12没有其它类是在所有视口尺寸全宽。为了使填充和边距正确工作,需要围绕它的.row,以便列类的填充由周围的.row(具有负的L和R边距)进行调整,然后在此之外,需要.container.container-fluid类防止水平滚动条。然而,如果此“大矩形”始终为全宽,与.col-md-12一样,则绝对不需要使用任何网格类。如果你想让它包含在你的最大宽度.container中,直接放在.container而不是周围的网格类,或者你可以把它放在.container-fluid只是得到左侧和右侧15px(默认填充)或把它放在没有任何东西(自己留下),它会在没有任何填充/阴沟的情况下撞到视口的边缘。

如果你不使用任何网格类,你可以让你的矩形百分比宽度,最大宽度(如果你愿意的话),并把阶级.center-block