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>

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

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

e.g。

桌面：文字|图片

手机：

文字

图像

这是我的jsfiddle bootstrap website

它应具有与休闲产品页面相同的响应设计

slack's product page

Answer 1

将响应媒体中的此css应用于图像非常简单

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

这是更新后的js Fiddle

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中添加了条件text-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 here

在html中处理您的制表，提供干净的代码非常重要。

干杯兄弟

如何在我们的网站上对齐我的图像，以便它们能够响应设备大小？

2 个答案: