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 类div，引导程序需要将其包裹在列中才能正常工作。

我删除了.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

您必须将col包裹在row
删除.hedtext-float（担心浮动的引导程序）
删除.header1 height: 130px;（这是图像超出边界的原因）

See working code

.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>

Answer 3

您必须在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>

缩小窗口大小后，图像会扩展到下一个div

3 个答案: