HTML/CSS 图像和文本格式问题（引导程序）答案

【问题标题】：HTML/CSS image and text formatting problems (Bootstrap)HTML/CSS 图像和文本格式问题（引导程序）
【发布时间】：2014-09-05 19:25:05
【问题描述】：

this 页面的格式有问题。

在移动设备上页面格式完全混乱（其他页面工作正常）。
图像之间的间距不相等。
标题“Projects”与其下面的句子之间存在随机间隔。

另外：如何在最后一张图片下方的页面底部添加一些空白？我尝试使用<br> 和一个空的<p> 标签，但它不起作用（尽管它可能不起作用，因为我做了一些导致上述问题的事情）。

所有代码都是公开的。您可以使用zarwanhashem.com/style.css 访问 CSS。

【问题讨论】：

我现在帮不了你，只能自己找检查员解决。我通常不问问题，但会处理检查员提供的文档和一些一般性问题
@wonderwhy 什么是检查员？我从来没有头。并且知道你在说什么文档。
Boostrap 文档。检查器是 Web 浏览器必须查看源代码、dom 树、css 属性等等的工具

标签： html css twitter-bootstrap formatting

【解决方案1】：

对于“随机间隙”：

p {
  padding-top: 0;
}

图像之间的间距对我来说很好，对于页面底部的空白：

body {
  padding-bottom: 150px;
}

【讨论】：

谢谢，它成功了。不同的项目应该被列在彼此的下方，而不是那种奇怪的楼梯效应。除非你们觉得这样更好看？大声笑。
这还不是全部。您必须使用引导组件。否则，你为什么要这样做？ @user3641545
@wonderwhy 你在回复什么？什么不是全部？他发布解决方案的问题有效。而且我实施了引导程序，因为它看起来很干净 + 为你做移动工作。我不了解大多数组件，并且没有很多关于最新版本的好的文档和教程。一切似乎都与旧的引导程序有关。
@user3641545 如果你能给答案打分就好了。
@user3641545 文档很清楚，但您必须熟悉它。如果您使用引导程序，那很好，但如果您阅读文档，您可以利用更多优势。

【解决方案2】：

所以我认为您对#1 的问题是您没有使用任何 Bootstrap 列类。您希望每个项目都在自己的<div class="row"></div> 中。然后假设您希望每个项目在更大的屏幕上都是全宽的，您将使用<div class="col-md-12"></div>。如果您希望每个项目在移动设备上小于全屏（这里我将使用一半），您可以将其扩展为 <div class="col-xs-6 col-md-12"></div>。

然后对于 #2，顶部：p {padding-top: 0;} 底部：body {padding-bottom: XXpx;}

【讨论】：

我查看了行和跨度，但它似乎不起作用。如果您再次检查该页面，您将看到我的更改。我想要做的是将图像与左侧的描述放在一起，将项目堆叠在一起。

【解决方案3】：

只是为了添加到已发布的内容中，如果您要为引导程序添加自定义边距，最好仅将它们包装在媒体查询中，因为您的边距对于移动设备来说太大了。如果想要响应式，请避免使用内联样式。

【讨论】：

我不知道什么是媒体查询，也不知道什么是内联样式。我对html和css不是很有经验。
内联样式是当您将样式直接添加到元素
时。媒体查询允许您根据查看内容的设备大小应用 css。要在以 640 像素或更小的分辨率查看时为所有段落添加 10 像素的下边距，您可以将其添加到您的 CSS 中。 @media only screen and (max-width: 40em) { p {margin-bottom:10px} }
@user3641545 加油！！在开始开发您的网络之前，并在您的简历中说您有网络开发经验，但您不知道必须学习 css 和 html。
感谢特里斯坦伍德。 @wonderwhy，我说我对 CSS 和 HTML “熟悉”，没有经验。我不想进入网络开发，我只想要一个简单的在线个人资料。我相信在工作中学习。