gpt4 book ai didi

ruby-on-rails - Twitter Bootstrap & rails - 内容居中并固定最小宽度

转载 作者:行者123 更新时间:2023-12-04 05:43:16 26 4
gpt4 key购买 nike

在我的 html 中,内容应该在屏幕上居中,并且他的宽度永远不应该大于 950px。

因为我希望在移动设备和桌面设备上显示相同的 html,所以我使用 Twitter Bootstrap 来使布局具有响应性。

问题是:我似乎无法使内容 div 居中并且最大宽度为 950px。

当我在浏览器上打开时,css 有这个媒体查询:

@media (min-width: 1200px)

这使我的 div 始终适合整个屏幕。

我该如何解决这个问题?

基本上我想做的是这样的:

Schema

橙色线是容器(或主体),蓝色线是行

感谢您的帮助。

编辑

只是我发现的一些东西,也许可以帮助别人帮助我

如果我注释掉这一行:

@import "twitter/bootstrap/responsive";

我的 div.content 保持 950px 的宽度,但我的 html 失去了它的响应行为,这是我不想要的

编辑 2

html 标记:

<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>

但是在浏览器上它创建了这个东西:

body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px

澄清一下,这不是 twitter bootstrap 上的问题,而是 twitter-bootstrap-rails 上的问题

我发现在开发中修复它的方法是打开 twitter-bootstrap-rails gem gem-open并更改文件:/vendor/toolkit/twitter/bootstrap/responsive.less 注释掉这些行:

// LARGE DESKTOP & UP
// ------------------

@media (min-width: 1200px) {

// Fixed grid
#grid > .core(70px, 30px);

// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);

// Input grid
#grid > .input(70px, 30px);

// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}

}

最佳答案

您可以使用包装器,这将为您提供 940 像素的默认大小。

<body>
<div class="container">
...
</div>
</body>

但是如果您想要自定义宽度,您应该像这样在 application.css 中添加一些 css:

body .container{
width:980px;
}

在这里查看:Bootstrap - Layout

一个很好的布局教程:Filling layout with bootstrap

关于ruby-on-rails - Twitter Bootstrap & rails - 内容居中并固定最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11895309/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com