Question

我正在写一个网站，并希望使用Bootstrap 4在一块文本旁边显示图像的预览。但是，当我将它们都放入列中时，它们会包裹在屏幕上，从而导致一行有效地高出两列

我尝试过将类添加到div元素（用于居中的类），但似乎无法解决问题。

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <br><br><br>
  <img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
  <div class="container-notfull">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>
          Summer Camps 2019
        </h2>
        <br>
        <h3>Curriculum</h3>
        <p>
          In this camp... text
        </p>
        <br>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-md-6 align-self-center constrain-img">
        <img class="h-75 img-center" src="http://placehold.it/700x700">
      </div>
      <div class="col-md-6 text-center align-self-center">
        <h3>
          There will be an entertaining camp... text
        </h3>
        <h4><a href="/css/img/flyer.pdf" download>Here</a> is a download to the flyer</h4>
        <br>
        <h3>Details</h3>
        <p><b>Place:</b></p>
        <p><b>Time:</b></p>
        <p><b>Days:</b></p>
        <p><b>Price:</b></p>
        <p>Maximum of 10 people per day</p>
        <br>
        <h4>Register now</h4>
      </div>
    </div>
  </div>
</body>

鉴于列宽加起来为12，我希望它们能水平放置。但是，它会溢出，并环绕到该行的底部。

Answer 1

问题是您的图片设置为block，但是您没有设置width，因此它将始终希望是其完整尺寸。

为width: 100%图像设置height: auto和.img-center可以解决此问题。

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: auto;
}

小提琴 https://jsfiddle.net/2g0kebs4/

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br><br><br>
<img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
<div class="container-notfull">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>
        Summer Camps 2019
      </h2>
      <br>
      <h3>Curriculum</h3>
      <p>
        In this camp... text
      </p>
      <br>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-6 align-self-center constrain-img">
      <img class="h-75 img-center" src="http://placehold.it/700x700">
    </div>
    <div class="col-6 text-center align-self-center">
      <h3>
        There will be an entertaining camp... text
      </h3>
      <h4><a href="/css/img/flyer.pdf" download>Here</a> is a download to the flyer</h4>
      <br>
      <h3>Details</h3>
      <p><b>Place:</b></p>
      <p><b>Time:</b></p>
      <p><b>Days:</b></p>
      <p><b>Price:</b></p>
      <p>Maximum of 10 people per day</p>
      <br>
      <h4>Register now</h4>
    </div>
  </div>
</div>

Answer 2

使用此功能，希望对您有所帮助。设置图片的宽度和

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br><br><br>
<img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
<div class="container-notfull">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>
        Summer Camps 2019
      </h2>
      <br>
      <h3>Curriculum</h3>
      <p>
        In this camp... text
      </p>
      <br>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-6 align-self-center constrain-img">
      <img class="h-75 img-center" src="http://placehold.it/700x700">
    </div>
    <div class="col-6 text-center align-self-center">
      <h3>
        There will be an entertaining camp... text
      </h3>
      <h4><a href="/css/img/flyer.pdf" download>Here</a> is a download to the flyer</h4>
      <br>
      <h3>Details</h3>
      <p><b>Place:</b></p>
      <p><b>Time:</b></p>
      <p><b>Days:</b></p>
      <p><b>Price:</b></p>
      <p>Maximum of 10 people per day</p>
      <br>
      <h4>Register now</h4>
    </div>
  </div>
</div>

如何解决环绕屏幕而不是适合屏幕的列

2 个答案: