Question

首先，抱歉这个菜鸟问题。我不认为这里的答案会增加21世纪对计算机科学的理解，但我很感谢社区的帮助。

我正在尝试，就以下链接的CodePen项目而言：

让主图像和标题在任何视图中居中，
对于火山口图像和相关的段落文本，有以下行为：
- 当段落文本大于图像时，文本环绕图像（在较小的显示器上）
- 当段落文本高度缩小（显示更宽）时，图像不应该高于它。

这是项目CodePen的链接，它（当然）在其中有一些调试代码作为JS，以及名为#hacky-*的ID： http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=0010。我尝试这项工作的一些尝试实际上使页面变得更糟（图像现在在某些尺寸下会出现一些正在进行的段落）。

当您显示/缩小显示的宽度时，显然包含图像的div正在改变高度，所以jQuery：

$(window).on("resize", resizeImage)

function resizeImage() {
  var x = $("#hacky-p-id").outerHeight();
  $("#hacky-img-id").css("height", x);
  $("#hacky-h3-id").text("Height: " + x);
  console.log("yes!");
}

正在产生效果，绝对不是我想要的效果（实际上是倒数）。它应该是一个img-fluid这个事实很复杂，我认为它可以在定义的高度上很好地工作，但我没有足够的知识基础来完全理解幕后可能发生的事情。

非常感谢任何帮助。

Answer 1

问题1 ：您在jquery.min.js之后加载bootstrap.min.js

问题2 ：您没有加载Bootstrap 4所需的tether.min.js。

问题3 ：您已将#hacky-p-id放在错误的段落上...

问题4 ：...您已将#hacky-img-id放置在图像的容器上，这不会缩小图像。

此时我停止了计数，因为我发现你的标记完全被打破了。在HTML中，关闭所有正在打开的配对标记非常重要。

你应该避免的另一件事是嵌套container-fluid。唯一可接受的嵌套Bootstrap container是指container作为container-fluid的直接子项。大多数其他container嵌套将导致边缘/填充问题，大多数人发现很难调试/修复。实际上，一旦你有container，你就不需要另外一个（除了上面的例子） - 你需要的只是row＆gt; col-*-*组合。

这是你的笔"fixed" version。但是，我没有做你最初要求的事情，并且根据段落的高度缩小了图像，因为我碰巧认为这是一个非常糟糕的设计决策，因为它有可能产生严重的渲染问题：当您调整图像大小以使其高度与段落高度匹配时，它将改变宽度，使段落重排并（可能）改变高度，使图像再次调整大小，使段落重新流动，等等......这有可能进入渲染循环，这将停止慢速设备并导致浏览器崩溃。简而言之， 从不这样做 的明显案例。

我并不特别赞同的其他决定，但是没有＆＃34;修复＆＃34;是：

将所有页面放在.jumbotron
在vmax中表示字体大小。您应该rem使用后备px。这是安全可靠的解决方案。

宽显示器上的Bootstrap 4：居中，并确保图像不比包装它的文本更高

1 个答案: