Css 引导：使列高度适应移动设备上的文本长度

我正在尝试使用Bootstrap框架使这些列适应mobile上的文本长度

如果你使用手机，你可以看到文本在列的外面

有可能修复它吗

我在这里准备了一个例子：

代码如下：

<div class="container">

<div class="row">
<div class="col-md-6" style="margin-bottom: 20px;">

<div class="col-md-12" style="height:250px; background-color: red; color: white;text-align: center; font-size: 18px;">

    <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.

</div>

</div>

<div class="col-md-6">

<div class="col-md-12" style="height:250px; background-color: green; color: white;text-align: center; font-size: 18px;">

    <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.

 </div>
 </div>

 </div>

 </div>

 <div class="container" style="margin-top: 20px;">

 <div class="row">
<div class="col-md-6" style="margin-bottom: 20px;">

  <div class="col-md-12" style="height:250px; background-color: red; color: white;text-align: center; font-size: 18px;">

    <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.consectetur adipiscing elit.

 </div>

</div>

 <div class="col-md-6">

  <div class="col-md-12" style="height:250px; background-color: green; color: white;text-align: center; font-size: 18px;">

    <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.

</div>

</div>

</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。


Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。


这是一个很好的例子。


Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。

下面是问题的屏幕截图：

---

您必须编写

min height

而不是

height

问题似乎在于您的内联样式“height”

试一试

---

希望这能解决您的问题

您可以使用

最小高度

而不是

高度

Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。


Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。


这是一个很好的例子。


Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英。

这将解决您的问题：

<div class="col-md-12" style="min-height: 250px;background-color: red;color: white;text-align: center;font-size: 18px;">
   <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit      
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。献祭精英

我所做的是，我改变了高度：250px至<代码>最小高度：250px

如果给属性

高度：250px

然后浏览器会给它一个固定的高度，不管内容的高度是多少。但是如果你给它一个

最小高度：250px

然后浏览器将高度设置为最小250px，如果内容的高度增加，则框的高度也将增加

---

另一方面，最好使用CSS文件，而不是直接将内联样式提供给HTML。

谢谢，这解决了问题，您也仔细解释了；）

<div class="col-md-12" style="min-height: 250px;background-color: red;color: white;text-align: center;font-size: 18px;">
   <i class="fa fa-play" aria-hidden="true" style="font-size: 50px; padding-top: 60px;"></i><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit      
</div>