代码之家 › 专栏 › 技术社区 › Eirik H

引导响应网格问题

responsive-design twitter-bootstrap css html

Eirik H · 技术社区 · 9 年前

我已经设置了一个引导网格 like so :

<div class="row">

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <!-- content -->
 </div>

 <!-- More cols -->
</div>

每个网格行上显示的列数应取决于屏幕大小,因此我发现很难指定更多div class=“row”或执行div clearfix来插入分隔符。这就是为什么所有列都在同一个div class=“row”内。

它在移动视图(宽度<500)和桌面/平板电脑(宽度>1024)中都能正常工作,但在这些宽度之间,行+单元格内容通过水平滚动超出屏幕,因此图像不会居中对齐。

你可以 see it live here 如果您将宽度调整到700-750左右。我一直在尝试调试为什么会发生这种情况,但我无法确定我做错了什么。有人愿意帮忙吗?

2 回复 | 直到 9 年前

Lalji Tadhani 9 年前

在中定义最小宽度 #页眉换行、#横幅换行、#导航换行、#主换行、#页脚换行、#总换行

{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}

删除此最小宽度。

第二件事是添加自定义CSS的宽度。css第6行这 width删除或添加最大宽度&尝试

.container {
margin: 0 auto;
width: 960px;}

Leo the lion Raje 9 年前

如果您谈论的是700-750px,那么只需从.container类中删除max-width,也可以从这个类中删除max width #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper .

我已经编辑了我的答案,但请继续使用拉吉的答案。。

推荐文章

vito · 为什么在启用触摸模式时忽略媒体查询?

2 年前

mike3996 · 我可以在前一个元素旁边浮动一个元素吗?

6 年前

Aaron · HTML CSS增加背景图像的大小,使其随文本增长

6 年前

Vítek Peterka · 在一个网站上使用href=“#关于我们”进行导航在较小的设备上不起作用

6 年前

Ravi21 · FF和IE中的元素变形

6 年前

user7907740 · 如何使填充响应

6 年前

Nathan Perigreth · 如何用javascript或css粗略确定设备的物理大小?

6 年前

user7127000 · 每个响应输入的程序都有一个带有无限循环的主线程,这准确吗?

6 年前

LED Fantom · .在Bootstrap网站上未找到img responsive

6 年前

Khepf · 将Reactstrap carousel图像配置为响应的最佳方法

6 年前