Как исправить обтекание колонок вокруг экрана вместо подгонки - PullRequest
Новая
       1

Как исправить обтекание колонок вокруг экрана вместо подгонки

1 голос
/ 12 июня 2019

Я пишу веб-сайт и хочу показать предварительный просмотр изображения рядом с блоком текста, используя 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, я ожидаю, что они умещаются горизонтально.Тем не менее, он переполняется и переносится в конец строки.

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Используйте это, надеюсь, это поможет вам.Установите ширину для изображения и 

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>
0 голосов
/ 12 июня 2019

Проблема в том, что ваше изображение установлено на 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;
}

Fiddle 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...