如何在此网站上对齐我的图像，以便它们能够响应设备尺寸

Question

我正在尝试使用bootstrap创建2列布局，其中每行都有2列：

一个包含文本，一个包含添加到文本的说明

的图像

这是引导程序代码：

这是导航栏。

  <div class = "navbar navbar-default navbar-static-top">
   <div class = "container ">
    <a href = "# " class  = "navbar-brand">levi</a>
          <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
           name = "button" >
          <span class = "navbar-toggle-Menu">Menu</span>
          </button>
    <div class = "collapse navbar-collapse ">
           <ul class = "nav navbar-nav navbar-right ">
                    <li><a href="#"> product</a></li>
                    <li><a href="#"> price</a></li>
                      <li><a href = "#">Support</a></li>
                    <li><a href = "#">Sign In</a></li>
           </ul>
    </div>
   </div>
  </div>

这是每行的2列布局

<div class = "container">
        <div class = "row">
          <div class = "col-sm-6 col-md-6 col-lg-8">
                  <h3><b>Connect Soft documents</b></h3>
                  <p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
                financial, operational and social behaviour of the institution.</p>
          </div>
          <div class = "col-sm-3">
  Image
          </div>
        </div>

        <div class = "row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole  webpage  when the device is less the 768px-->
          <div class = "col-sm-5">
  <h3><b>Improve decision models</b></h3>
  <p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
  making better decisions.</p>
          </div>
          <div class = "col-sm-6">
           <img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px"  class = "pull-right img-responsive imG">
          </div>
        </div>
        <div class = "row">
          <div class = "col-sm-6">
              <h3><b>Search. Get what is important to You!</b></h3>
              <p class = "lead">All notifications and documents are indexed and
              archived so that you can find what is needed at all times.</p>
          </div>
          <div class = "col-sm-6">
          </div>
        </div>

        <div class = "row">
          <div class = "col-sm-4">
            <h3>Collaborate with other apps!</h3>
              <p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
          <div class = "col-sm-8">
<img src = "Integrate.jpg" alt = "Integrate" width = "300" height = "300" >
          </div>
        </div>

</div>
<footer>
<div class = "">
<ul>
  <li>Security</li>
</ul>
</div>
</footer>

我希望它的工作方式是，当页面在桌面上查看页面时，文本左侧对齐，图像右对齐。

当它在小于768px上的屏幕上查看时，文本在图像上方，图像在页面中央对齐。

，例如

桌面：文字|图像

手机：

文字

---

图像

这是我的JSFiddle Bootstrap网站

它应该具有与Slack产品页面相同的响应设计

Slack的产品页

Answer 1

这很容易，只要将此CSS应用于响应媒体

.imG{
    float: none !important;
    margin: auto;
    text-align: center;
}

这是更新的JS小提琴

Answer 2

在这里解决方案：

<div class="row">
  <div class="col-md-6 col-sm-12">
    <h3>Collaborate with other apps!</h3>
    <p class="lead">Connect to the tools you need to prevent wasting time using so many apps </p>
  </div>
  <div class="col-md-6 col-sm-12 text-center-sm">
    <img src="Integrate.jpg" alt="Integrate" width="300" height="300">
  </div>
</div>

我还在CSS

中添加有条件的文本align类

.text-center-xs {
    text-align: center;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-center-md {
        text-align: center;
    }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: center;
    }
}

此处完整的JSFIDDLE

在您的HTML中照顾您的表格，提供干净的代码非常重要。

欢呼兄弟