css - Bootstrap:在移动设备上使列高适应文本长度

我正在尝试使用Bootstrap框架使列适应移动设备上的文本长度。

如果您使用移动设备，则可以看到文字超出了栏的范围。

有可能解决吗？

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

https://www.bootply.com/1adDvvRmVt

这里的代码：

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

这里是问题的屏幕截图：

最佳答案

这将解决您的问题：

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

我所做的是，我已将height: 250px;更改为min-height: 250px;

如果给属性height: 250px;，那么无论内容的高度是多少，浏览器都将给它一个固定的高度。但是，如果给它一个min-height: 250px;，则浏览器会将高度设置为最小值250px，如果内容的高度增加，则框的高度也会增加。

另外，最好使用CSS文件，而不是直接将内联样式赋予HTML。

关于css - Bootstrap:在移动设备上使列高适应文本长度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45231386/