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

this页面上的格式混乱了。HTML/CSS图像和文本格式问题（引导程序）

页面格式化在手机上完全混乱（其他页面正常工作）。
图像间没有相等的间距。
标题“项目”和它下面的句子之间有一个随机差距。

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

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

来源

2014-09-05 Zarwan

我现在无法帮到你，但是试着自己和检查员一起解决。我通常不提问题，但拿起文档和一些一般问题，从检查员的appart – wonderwhy 2014-09-05 19:42:40

@wonderwhy什么是检查员？我从来没有去过它。并且idk你在说什么文档。 – Zarwan 2014-09-05 21:26:41

Boostrap文档。而检查员是一个工具Web浏览器必须看到的源代码，DOM树，CSS属性和更多 – wonderwhy 2014-09-05 23:24:36

对于“随机差距”：

p { 
    padding-top: 0; 
}

图像之间的间距看起来好像没什么问题，并在页面底部空白：

body { 
    padding-bottom: 150px; 
}

来源

2014-09-05 19:43:59 Gofilord

谢谢，它的工作。不同的项目应该被列在彼此之下，而不是那种奇怪的楼梯效应。除非你们认为这看起来更好？大声笑。 – Zarwan 2014-09-05 21:36:38

这不是全部。你必须使用引导组件。否则，你为什么这么执行？ @ user3641545 – wonderwhy 2014-09-05 23:27:44

@wonderwhy你在回答什么？什么不是全部？他发布的问题解决方案的工作。我实施了bootstrap，因为它看起来很干净，移动设备是否适合你。我不知道大多数组件，并且在最新版本上没有很多很好的文档和教程。一切似乎都是关于旧的引导。 – Zarwan 2014-09-06 05:40:20

所以我觉得你的问题对于＃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;}

来源

2014-09-05 19:47:29

我抬头看了一下行和跨度，但它似乎没有工作。如果您再次查看该页面，则会看到我的更改。我想要做的是将图像与左侧的描述一起放在一起，将项目堆叠在一起。 – Zarwan 2014-09-05 21:53:44

只需添加到什么过帐，如果要添加自定义边距来引导，最好在媒体查询包裹它们只能作为你的手机的利润率很大。如果需要响应，请避免使用内联样式。

来源

2014-09-05 19:57:18

我不知道媒体查询是什么，或者什么是内联样式。我不是非常有经验的HTML和CSS。 – Zarwan 2014-09-05 21:27:24

内联样式是将样式直接添加到元素

。媒体查询允许您根据查看您的内容的设备大小来应用css。当在640px或更小的角度查看时，为所有段落添加10px的底部边距，您可以将其添加到您的CSS中。 @media唯一屏幕和（最大宽度：40em）{{margin-bottom：10px} } – 2014-09-05 22:52:17

@ user3641545加油！在开始开发你的网站并在你的简历中说出你对Web开发的经验时，如果你不知道你必须学习CSS和HTML。 – wonderwhy 2014-09-05 23:29:53

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

回答

相关问题