内容在移动设备上没有响应（引导程序）答案

【问题标题】：Content is not responsive on Mobile devices (Bootstrap)内容在移动设备上没有响应（引导程序）
【发布时间】：2017-10-04 01:31:44
【问题描述】：

我正在处理一个项目，但是我需要帮助来使元素具有响应性。调整浏览器大小时，框中的文本将覆盖图像。我是否必须向项目的 HTML 或 css 添加一个类（在调整大小的视图上无法删除文本）。正如您在图像中看到的那样。 Normal look & 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;
}

【问题讨论】：

添加这个 img {max-width:100%;}
谢谢它的工作，但我可以添加一行代码，将图像的 col 的 ful 大小？因为现在图片比盒子短了。
不太明白你的意思
如果我调整浏览器的大小，图像会变小（你会看到它下面有一个空白）。我可以通过使图像适合 col-md-3 来解决这个问题（因此它将是完整的 col 宽度）吗？
好的，我明白了。如果您尝试这样做，图像将被拉伸并失去其比例，而我们不能仅使用 CSS 来做到这一点。因为你想要的是两个 colmun 应该有相同的高度，这有点棘手，但它是可行的

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

谢谢，现在图片下面不会再显示空白了。而且看起来不错！