Question

新的引导程序，并尝试在6英寸以下的移动设备上将图像堆叠在图像下方。在7英寸以及更多屏幕设备上运行良好。

在平板电脑和台式机等较大的屏幕上，图像和文字按预期显示在一行上。

但是在较小的屏幕上，我希望文本堆叠在图像下方，两者都应居中;没有得到所需的结果成为图像的一部分和文本被堆叠时切割。我希望图像和文本堆叠，没有任何部分被切断。这是我想解决的问题。

以下是代码：

<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6 ">
  <img class="aligncenter size-full wp-image-99991388" src="http://francmasones.net/wp-content/uploads/2016/10/sm.png" alt="sm" width="398" height="376" /></div>
  <div class="col-xs-12 col-sm-6 col-lg-6">
  <p style="text-align: left;"><span style="font-size: 17pt; font-weight: 400;"><strong>Etiam porta urna est, id bibendum nisl hendrerit quis. Fusce vel urna ut neque posuere blandit.!</strong></span></p>

 <div class="span6">
  <p style="text-align: justify;"><span style="font-size: 15pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, lacus eu sodales tempor, augue tortor finibus nisi, ut vulputate leo metus eget erat. Suspendisse viverra, urna sed sodales bibendum, lorem urna ullamcorper quam, vel bibendum elit mi feugiat risus. Aliquam aliquet, eros nec porttitor bibendum, justo ex facilisis mauris, vel rhoncus purus eros sed nisl. Nulla faucibus posuere varius. Maecenas sed nisi ullamcorper, bibendum ligula id, ornare quam. Donec fermentum pretium lorem et gravida. Nullam placerat augue sed arcu iaculis vehicula. Pellentesque ultrices, justo eget ultrices vestibulum, ligula risus porta nisl, quis imperdiet ante diam sed dui. Morbi ante lacus, pellentesque ut turpis ut, pulvinar pretium nulla.</span></p>

</div>
</div>
</div>
</div>

您的见解和善意回复将受到赞赏

Answer 1

我不明白你的问题。任何我的理解如何在行类下面尝试这个代码。

<div class="center-block"> <div>

Answer 2

试试这个：

@media (max-width: 768px) {
.col-xs-12 {
    text-align: center
}
}

Answer 3

您可以根据Bootstrap Grid Media Queries断点为此编写媒体查询。像：

/* For Mobile Devices (equivalent to col-xs-*) */
@media screen and (max-width: 767px) {
   .img-holder img {
    margin: 0 auto 15px;  /* Centers the image */
  }

  .text-holder .title {
    text-align: center;  /* Centers the content */
  }

  .text-holder .description {
    text-align: center;  /* Centers the content */
  }
}

请看下面的代码段：

＆＃13;

.text-holder .title {
  text-align: left;
}

.text-holder .description {
  text-align: justify;
}

/* For Mobile Devices (equivalent to col-xs-*) */
@media screen and (max-width: 767px) {
   .img-holder img {
    margin: 0 auto 15px;
  }
  
  .text-holder .title {
    text-align: center;
  }

  .text-holder .description {
    text-align: center;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-6 img-holder">
      <img class="img-responsive aligncenter size-full wp-image-99991388" src="http://francmasones.net/wp-content/uploads/2016/10/sm.png" alt="sm" width="398" height="376" /></div>
      <div class="col-xs-12 col-sm-6 col-lg-6 text-holder">
        <p class="title"><span style="font-size: 17pt; font-weight: 400;"><strong>Etiam porta urna est, id bibendum nisl hendrerit quis. Fusce vel urna ut neque posuere blandit.!</strong></span></p>
        <div class="span6">
          <p class="description"><span style="font-size: 15pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, lacus eu sodales tempor, augue tortor finibus nisi, ut vulputate leo metus eget erat. Suspendisse viverra, urna sed sodales bibendum, lorem urna ullamcorper quam, vel bibendum elit mi feugiat risus. Aliquam aliquet, eros nec porttitor bibendum, justo ex facilisis mauris, vel rhoncus purus eros sed nisl. Nulla faucibus posuere varius. Maecenas sed nisi ullamcorper, bibendum ligula id, ornare quam. Donec fermentum pretium lorem et gravida. Nullam placerat augue sed arcu iaculis vehicula. Pellentesque ultrices, justo eget ultrices vestibulum, ligula risus porta nisl, quis imperdiet ante diam sed dui. Morbi ante lacus, pellentesque ut turpis ut, pulvinar pretium nulla.</span></p>

        </div>
      </div>
    </div>
  </div>

＆＃13;

还要避免使用内联样式。这是一种不好的做法。

希望这有帮助！

使用Boostrap将图像和中心对齐较小设备上的文字

3 个答案: