Question

我有4张图片，每张图片有4个文字。我将它们放在同一行，但如果我减少浏览器的宽度以检查响应度，则文字会出现在图片上。我需要在同一行中找到它们，prevenet文本在图片上，如果有可能从4列产生2列，如果带有文本的图像不适合。这是mty代码

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<div class="container">
  <div class="col-lg-12 col-xs-10 col-md-12">
    <div class="col-lg-3 col-md-6 col-sm-6">
      <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
      <div class="col-md-8 col-lg-7 col-xs-12">
        <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
      <div class="col-md-8 col-lg-7 col-xs-12">
        <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
      <div class="col-md-8 col-lg-7 col-xs-12">
        <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
      <div class="col-md-8 col-lg-7 col-xs-12">
        <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
      <div class="col-md-8 col-lg-7 col-xs-12">
        <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了解决方案。添加了新课程＆＃34; NEWCLASS ＆＃34;对于那个div，文字不会出现在图像上。

＆＃13;

.NEWCLASS {
  position: absolute;
  margin-left: 105px;
}

＆＃13;

<div class="col-lg-3 col-md-6 col-sm-6 NEWCLASS">
  <img class="imgheight" src="https://texnoplus.az/image/icons/a2.png">
  <div class="col-md-8 col-lg-7 col-xs-12">
    <span style="font-size: 14px;"><b>Цены</b></span><br> Низкие цены<br> На все товары
  </div>
</div>

＆＃13;

防止文字在小宽度上进行图片

1 个答案: