gpt4 book ai didi

css - 删除 Bootstrap 行中的空格

转载 作者:太空宇宙 更新时间:2023-11-04 13:45:09 26 4
gpt4 key购买 nike

我有以下输出:

enter image description here

我想减少白边,让它看起来更薄。

这是代码:

<div class="container">
<div class="spacer-big"></div>
<div class="spacer-big2 hidden-xs hidden-sm"></div>
<div class="row">
<div class="col-md-1">&nbsp;</div>
<div class="col-md-8 col-xs-10">
<div id="container">

<!-- Content -->

</div>
<div id="footer">

<!-- footer -->

</div>
</div>
<div class="col-md-1">

<!-- Other stuff -->

</div>
</div>

我正在尝试弄清楚如何删除空白(或只留下一点);我尝试寻找“nopadding”类和其他解决方案,但无法弄清楚......

注意:“spacer-big”是处理高度而非宽度的类

最佳答案

您在图像上硬编码宽度以创建间隙 Bootstrap 构建在 12 网格上。你的网格总共有 12 个水平,你的填充很好。所以我检查了你的内联样式代码。 (顺便说一句,你永远不应该这样做)将所有 css 发送到样式表。并注意到您的宽度和高度是预先设定的。我尝试清理您的代码,但没有解决方法。它需要重建。

站点架构是软件工程中的首要类(class)之一,这是有充分理由的。我会列出一些你需要注意的事情

  1. 如果您要使用 Bootstrap ,请使用它的网格。
  2. 不要使用这样的 <div class="spacer-big"></div>在两个容器之间创建一个空间。有更好的方法可以通过简单地添加 margin-top:20px 来做到这一点到下面的容器或使用 Bootstrap 的 <div class="clear"></div>
  3. 您的网站在内容中显示了两个主要栏,其中包含图像。将该主容器分成 50% 的子列。简单地 display:block你的图像在他们所以他们堆叠。如果你需要他们之间的 margin 。加一个。
  4. 正如我上面提到的,您的网站架构从一开始就为糟糕的页面设定了节奏。如果您正确构建页面框架,您将在内部进行最少的调试。如果你半途而废,你将花费大量时间来修复错误以弥补架构的不足。遵循容器的自然顺序<body><header><nav><container><footer>
  5. 使用包装器和父子关系,以便您可以正确分布元素,从而在您的网站上添加 12 个元素。例如,如果您的侧面有两根小柱子,中间有一根宽柱子,您可以考虑使用 col-md-1---col-md-10 ---col-md-1这将均匀分布。
  6. 避免内联样式。我解释了这个。使用你的 css 表,尽量不要为你使用的所有东西创建一个类。了解如何使用父类或 id 映射和定位您的 img 或 p 元素
  7. 最后但并非最不重要的一点。避免 position:absolute 像 plage。你想要一个流畅的构建。绝对定位迫使您在下一个元素上更正它,而且它有很多错误。

我希望我能为您提供更多。但是你需要重建。这超出了边距或填充的简单修复。

我希望这能让您满意并获得答案。

祝你好运。如果您在构建过程中需要进一步的帮助,请在我的公司资料中查看我的网站,我可以随时为您提供帮助。

将它们更改为:

<img src="http://vivacastenedolo.mrweb.info/content/img/home/quadratino_rect_empty.jpg" width="345px" height="170" alt="">

或者更好的是,删除内联样式并将它们添加到:

#container > div > a > img {
width: 345px;
height: 170px;
}

并在 css 中替换以下内容

.item_text_rect div {
position: absolute;
bottom: -5px;
line-height: 16px;
color: white;
width: 345px;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
height: 55px;
}

关于css - 删除 Bootstrap 行中的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22571002/

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