Bootstrap：在移动设备上调整列高度到文本长度

Question

我正在尝试使用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>

这是问题的截图：

Answer 1

这将解决您的问题：

<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提供内联样式。

Answer 2

您必须写min-height而不是height。

Answer 3

问题似乎是你的内联风格＆＃34;身高＆＃34;

试

min-height:250px;

link to example

希望这可以解决您的问题

Answer 4

您可以使用min-height代替height

＆＃13;

＆＃13;

<div class="container">

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

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

</div>

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

<div class="col-md-12" style="min-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="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>

</div>

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

  <div class="col-md-12" style="min-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>

＆＃13;

＆＃13;

＆＃13;