Изображение охватывает следующий div, когда размер окна уменьшается

Question

Итак, я должен создать эту страницу, где вы получите текст рядом с изображением, отображаемым, как показано здесь

Но при сворачивании окнаразмер изображения перекрывается, как показано здесь

  <div class="header1">
  <div class="col-md-8">
     <h4 class="hedtext">Name</h4>
     </br>
     <h4 class="hedtext">Address</h4>
     </br>
     <h4 class="hedtext">Contact Number</h4>
     </br>
     <h4 class="hedtext">Fax</h4>
  </div>
  <div class="col-md-4">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
  </div>
</div>   

и вот css

.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt; 
font-size: 13px;
font-weight: 750;
float: left;
}

.header1 {
 border: 1px solid black;
 height: 150px;
 }

.img1 {
width: auto;
height: 130px;
padding :10px;
}

Кроме того, с помощью начальной загрузки3Все, что я хочу, - это чтобы текст располагался рядом друг с другом при минимизации размера окна.

Answer 1

Сначала вы забыли добавить класс * .row , который требуется для начальной загрузки, чтобы правильно обернуть столбцы.

Я удалил .pull-right и вместо этого просто добавил text-right в столбец. Вы также можете использовать поплавки или что-то еще, чтобы установить изображение с правой стороны, как вы хотите.

<div class="header1 row">
    <div class="col-md-8">
        <h4 class="hedtext">Name</h4>
        </br>
        <h4 class="hedtext">Address</h4>
        </br>
        <h4 class="hedtext">Contact Number</h4>
        </br>
        <h4 class="hedtext">Fax</h4>
    </div>
    <div class="col-md-4 text-right">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            class="img1">
    </div>
</div>

Answer 2

вы должны добавить отзывчивый класс в div, например col-xs-* для отзывчивого

сделать это для вашего решения

<div clss="row">
    <div class="header1">
        <div class="col-md-8 col-xs-8">
            <h4 class="hedtext">Name</h4>
            </br>
            <h4 class="hedtext">Address</h4>
            </br>
            <h4 class="hedtext">Contact Number</h4>
            </br>
            <h4 class="hedtext">Fax</h4>
        </div>
        <div class="col-md-4 col-xs-4">
            <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                 class="pull-right img1">
        </div>
    </div>
</div>

Answer 3

1. Вы должны обернуть col в row
2. Удалить .hedtext - float (начальная загрузка беспокоится о float)
3. Удалить .header1 height: 130px; (Это причина изображения вне границы)

См. Рабочий код

.hedtext {
  line-height: 2pt;
  font-size: 13px;
  font-weight: 750;
}
.row {
  border: 1px solid black;
}

.img1 {
  width: auto;
  height: 130px;
  padding: 10px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col-md-8">
    <h4 class="hedtext">Name</h4>
    <h4 class="hedtext">Address</h4>
    <h4 class="hedtext">Contact Number</h4>
    <h4 class="hedtext">Fax</h4>
  </div>
  <div class="col-md-4">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
  </div>
</div>
</div>