gpt4 book ai didi

html - 使用 col-lg-8 bootstrap 时 margin 自动不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 01:21:25 25 4
gpt4 key购买 nike

我需要建立一个网上商店。

现在我想放置一个额外的 div在主容器中。为了使它居中,我为自动 margin 制作了一个类。问题是它不适用于 Bootstrap 的 col-lg-8。 .我将背景涂成黑色,看看会发生什么。它是左对齐的。如果我给 div 一个固定的宽度它会将它对齐在中心但是 background-color由于 div 的高度,未显示转向0px .

为什么当我使用 Bootstrap 时 margin 自动不起作用 col-lg-8 ?为什么我的高度消失了 div当我给它一个固定的宽度时。我之前遇到过这个问题,当我使用自动高度时,div 的高度即使其中有一个带有输入的表单,它也会获得 0 值。我希望它能根据内容进行缩放。

<body>
<div id="container" class="container col-lg-12">
<div class="col-lg-8 margin-auto" style="background-color: #000;">
<form class="col-lg-12">
<input type="submit" value="Bestellen" />
</form>
</div>
</div>
</body>

最佳答案

您需要添加 a) row 和 b) 给您的 col-lg-8 一个偏移量 2。margin-auto不适用于 float 元素(这是 Bootstrap 3 处理 col 元素的方式)。

<div id="container" class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #000;">
<form class="col-lg-12">
<input type="submit" value="Bestellen" />
</form>
</div>
</div>
</div>

仅包含 float 元素的元素默认具有 height: 0;。为确保容器元素在视觉上包含其子元素,您需要向容器添加 clearfix 类。

关于html - 使用 col-lg-8 bootstrap 时 margin 自动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48986757/

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