2

我使用引导 css 样式化我的网站。我的代码很简单

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner"class="container" style='border:solid width="1280px" '>
       some text
    </div>
</div>

因为我使用的是bootstarp，所以外部div的宽度是1170px，但是，正如你所看到的，我将内部div的宽度硬编码为1280px，比它的父div宽。从下图中可以看出，内部 div 的右边缘与外部 div 重叠，但左边缘保持不变。

我的问题是，我该怎么做才能不仅扩展内部 div 的右侧，还扩展内部 div 的左侧。换句话说，始终保持内部 div 对齐中心。

请帮助我解决这个 http://jsfiddle.net/FQUXQ/ 任何输入都非常感谢。

- - - - - - - - - 更新 - - - - - - - - - - -

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works 这篇文章描述了网格系统是如何工作的。

在此处输入图像描述

4

1 回答 1

3

您帖子中的代码说

style='border:solid width="1280px" '

但我猜你的意思是

style='border:solid;width:1280px"

但我认为这只是一个错字。但是，在另一个容器中使用 .container 并不是一个好主意，因为就像@Saravanan 所说的那样，引导程序会根据屏幕大小（媒体查询..）给出宽度

相反，您应该将代码更改为

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner" class="row" style="border:solid">
       some text
    </div>
</div>

甚至更好，如果您希望在页面中有任何列，请使用

<div id="outer" class="container" style="border:solid">
    Test
    <div class="row" style="border:solid">
        <div class="col-lg-12" id="inner" >
           some text
        </div>
    </div>
</div>

如果您希望它在较小的视口中表现不同，则可以为最后一个 div 的类赋予更多类。所以我要说的是：使用 Bootstrap 给你的元素并尝试按照它的意图使用它们。看看这个： http: //getbootstrap.com/css/#grid

我建议使用单独的 css 样式表而不是内联。

于 2013-11-14T13:15:45.187 回答