Question

我正在尝试使用bootstrap完成项目练习。我必须重新创建的页面位于：https://codepen.io/freeCodeCamp/full/NNvBQW

我坚持在图像周围放置边框。这是我的代码： https://codepen.io/krassheit/pen/mxmdWG?editors=1100

HTML

<div class="container">
  <div class="row" id="mainbox">
     <div class="col-xl">
       <h1 class="text-center">Dr. Norman Borlaug</h1>
       <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
       <div id="test">
       </div>
       <figure class="figure mx-auto d-block image-box">      
          <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" class="img-fluid mx-auto d-block" alt="Placeholder">
          <figcaption class="figure-caption text-center"> Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
       </figure>      
    </div>
  </div>
</div>

CSS

body {background-color: gray;}

#mainbox {
  background-color: #eed2ee;  
}

.image-box{
    padding: 2px 2px 2px 2px;
    background-color: red;
    margin-left: 100px;
}

然而，当我查看它的窗口太宽时，我得到边框一直扩展到主外框边缘的问题。只有当我将窗口的大小调整为小于原始图片大小时，边框才会调整大小到实际的填充。参见附件截图：

Wide Narrow

Answer 1

删除数字元素只需使用

<div class="img-thumbnail">
    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div>

填充应位于外部元素上（#mainbox外部，.container内部）。您可能想要检查.jumbotron，因为这是示例页面中使用的内容...

您可以使用<figure>，但使用.mx-auto类将无效，除非父元素使用flexbox（可由.d-flex激活）

在Bootstrap文档中查看.img-thumbnail。那就是你需要的不是吗？：）

Answer 2

我不确定为什么padding shouold在外部元素上？你能解释一下吗？

我已经使用缩略图类重写了代码，但它看起来仍然相同。这是代码：

<div class="container">
  <div class="row" id="mainbox">
     <div class="col-xl">
       <h1 class="text-center">Dr. Norman Borlaug</h1>
       <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
       <div class="thumbnail image-box">
          <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
          <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
       </div>      
    </div>
  </div>
</div>

我明确地不想使用jumbotron类，因为我认为应该有一个基本的方法来做到这一点。

Answer 3

问题的原因似乎是因为您没有将左右填充分配给外部div。试试这个HTML代码。

<div class="container">
    <div id="mainbox">
        <div class="row">
            <div class="col-xl">
                <h1 class="text-center">Dr. Norman Borlaug</h1>
                <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
                <div class="thumbnail image-box">
                    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
                    <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
                </div>
            </div>
        </div>
    </div>
</div>

这个css代码

body {background-color: gray;}
    #mainbox {
      background-color: #eed2ee;
      padding: 30px 60px;
    }
    .image-box{
      background-color: red;
      padding: 5px 5px 5px 5px;
    }
    .image-box img {
      width: 100%;
    }

Answer 4

问题是类.image-box是display:block;，这意味着该类的div是全宽的，所以当你在宽屏幕上查看时，该类将扩展为全宽基数该屏幕的分辨率。

解决方案非常简单，您只需将.imade-box设置为display:inline-block;即可。当您将其设置为内联块时，您的图像将不再居中，因此我的下一个解决方案是将父div设置为text-align:center，这就是您所需要的！：）

请检查：https://codepen.io/anon/pen/oqQZoe?editors=1100

Answer 5

尝试应用边框样式

您可以直接将此样式用于图像类“.img-fluid”

.img-fluid{
    border-color: blue;
    border-style: solid;
}

或者首先尝试让图形部分的宽度与图像相同，然后将样式应用到图形部分，您将获得与应用于图像相同的效果。

Boostrap - 边框填充太宽

5 个答案:

尝试应用边框样式