bootstrap container 宽度问题

Posted 2023-05-03

bootstrap container 在浏览器宽度大于1200时 container的宽度为1170，再加上padding-left和padding-right各15px，总宽度应该为1200px，但是为什么实际宽度还是只有1170px？

参考技术A 你添加一下背景色，然后更改一下填充距，这样你就能看明白原因了。追问

更改padding确实看到了里面内容宽度在变化，但是为什么呢？padding不应该增加自身的宽度吗？我还做了个测试，在不引入bootstrap.css的时候，的宽度为1200px， 在引入以后宽度就变为1170px了。但是我没找到造成差异的原因

追答

bootstarp的样式还有一个边距也是15，还有一个前提是设定了宽度是100%。

追问

终于找到原因了，是因为css3的属性box-sizing的原因，bootstrap的box-sizing的设置的值是border-box，即传统的IE盒子模型，padding和border被包含在width和height中了，所以在设置了padding或者border后，宽度会相应减少

参考技术B padding不应该增加自身的宽度吗？这句

他使用了box-sizing,不会增加宽度的

django-bootstrap3 字段宽度控制

【中文标题】django-bootstrap3 字段宽度控制

【英文标题】：django-bootstrap3 fields width control

【发布时间】：2015-08-27 03:08:22

【问题描述】：

我正在为我的项目使用https://github.com/dyve/django-bootstrap3 插件，代码如下

<div class="container">
        <div class="row">
            <div class="jumbotron">
                <div class="text-center">
                    <h1>% block header_text %% endblock %</h1>
                    <form method="post" class="form-inline">
                        % csrf_token %
                        Input: % bootstrap_field form.input layout='inline' %
                        Object: % bootstrap_field form.object layout='inline' %
                        <input type="submit" class="btn btn-xs btn-primary" value="Submit"/>
                    </form>
                </div>
            </div>
        </div>

并得到这个字段作为结果 我如何控制它们的宽度？

我尝试在 .css 文件中更改它，但它只适用于焦点 .form-control:focus width: 320px

【参考方案1】：

通过将"id": "input-form"添加到窗体小部件并在.css文件中调整#input-form来解决。

【讨论】：

如何使用bootstrap3在模板html的字段输入中添加"id"字段？