Question

我正在开展一个项目但是，我需要帮助才能使元素响应。调整浏览器大小时，框中的文本将覆盖图像。我是否必须在项目的HTML或css中添加一个类（在调整大小的视图中不能删除文本）。正如你在图像中看到的那样。 Normal look＆amp; Resized look

这是HTML：

<div class="col-md-9">
     <div class="item">
       <div class="row">
         <div class="col-md-3">
           <a><img src="../images/pimg.png"></a>
         </div> <!-- End Image -->
        <div class="col-md-6">
          <h4 class="item-name">Item1</h4>
          <p class="item-desc">This is an item's description. Feel free to edit me :)
          <a href="" class="btn btn-rounded btn-default btn-framed btn-small">Learn More</a>
        </div>
        <div class="col-md-3">
       </div>
     </div>
   </div> <!-- End Middle -->
</div>

CSS（项目）：

.item {
 -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
 box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
 background-color: #fff;
 display: block;
 }
.item:hover {
-moz-box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
color: #000;
}
.item-name {
padding-left: 15px;
padding-top: 10px;
}
.item-desc {
padding-left: 15px;
font-size: 14px;
color: #A4A4A4;
}

CSS（按钮）：

.btn {
-moz-transition: 0.3s ease;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
border: none;
outline: none !important;
font-weight: bold;
padding: 4px 12px 6px 12px;
}
.btn.btn-rounded {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.btn.btn-framed {
background-color: transparent;
border-style: solid;
border-width: 2px;
}
.btn.btn-framed.btn-default {
border-color: rgba(31, 31, 31, 0.2);
color: #1f1f1f;
}
.btn.btn-framed.btn-default:hover {
border-color: #03B01D;
}
.btn.btn-framed.btn-small {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
padding: 4px 10px;
}

Answer 1

您可以使用.img-fluid课程来提高图片响应能力：

<img src="../images/pimg.png" class="img-fluid">

或流体柱：

<div class="col-md-9">
     <div class="item">
       <div class="row">
         <div class="col-md col-md-auto">
           <a><img src="../images/pimg.png" width="150px" height="215px"></a>
         </div> <!-- End Image -->
         <div class="col-md">
           <h4 class="item-name">Item1</h4>
           <p class="item-desc">This is an item's description. Feel free to edit me :)
           <a href="" class="btn btn-rounded btn-default btn-framed btn-small">Learn More</a>
         </div>
     </div>
   </div> <!-- End Middle -->
</div>

内容在移动设备上无响应（Bootstrap）

1 个答案: