bootstrap 上的内容定位技巧

Question

请先检查这个HTML模板Clippinghand

我的问题是我们在下面提供的内容。有第一张图片，然后是 posts，接下来是第一张 post，然后是我拍摄的 6 Element 之类的图片。在计算机类型的设备上一切正常，但是当我要让它对移动设备或标签设备做出响应时，它就会出现问题，问题是图像和内容越来越接近，我只是想让它们成为 post 的顶部s 我的意思是我希望我的图片在所有 post 的顶部，我该怎么做？有什么诀窍吗？另外，我如何仅使用一个自定义 post 来完成此部分？ Here is an example on image

Answer 1

看这里：http://jsfiddle.net/mwvfteuq/

简而言之，您需要按照您希望它们出现在最小屏幕上的顺序放置 divs。对于更宽的设备，您可以将 float 设置为 left 或 right（bootstrap 中的 pull-left 和 pull-right）以自定义元素在排。使用最小屏幕的媒体查询撤销这些属性。

例如：

HTML（使用bootstrap）

<div class="row">
    <div class="col-sm-6 pull-right right">img</div>
    <div class="col-sm-6">some stuff</div>
</div>
<div class="row">
    <div class="col-sm-6">img</div>
    <div class="col-sm-6">some stuff</div>
</div>

CSS

@media (max-width: 768px) {
    div.right{
        float:none !important;
    }
}

别忘了用!important覆盖bootstrappull-right属性

Answer 2

您也可以通过 Push + Pull which is built into Bootstrap. You'll have to reorder your content to achieve this. Here a good article 使用列排序。

基本上将列内容按相反顺序堆叠并应用推拉类。（*而不是内容 1 然后是内容 2，堆栈内容 2，然后是 col-md-6 中的内容 1）。请参阅工作示例，并将对其进行说明。

.red {
  background: red;
}
.blue {
  background: lightblue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="our-services">
  <div class="container">
    <div class="row red">
      <div class="col-md-6">
        <div class="img-one">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content-one">
          <h4>Background Remove</h4>
          <em>Price starts from [=11=].49</em>

          <p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders,
            and remove image background turning it to pure white, transparent or color background as per your guideline.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row blue">
      <div class="col-md-6 col-md-push-6">
        <div class="img-two">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6 col-md-pull-6">
        <div class="content-two">
          <h4>Web-ready Images</h4>
          <em>Price starts from </em>

          <p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px ) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform
            like Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row red">
      <div class="col-md-6">
        <div class="img-three">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content-three">
          <h4>Multiple Mask</h4>
          <em>Price starts from </em>

          <p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row blue">
      <div class="col-md-6 col-md-push-6">
        <div class="img-four">
          <img src="http://placehold.it/350x150" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-6 col-md-pull-6">
        <div class="content-four">
          <h4>COLOR MATCHING</h4>
          <em>Price starts from </em>

          <p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save
            you from investing more of your time and money in taking photos.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End of Our services area -->

bootstrap 上的内容定位技巧

Content Positioning trick on bootstrap

css

wordpress

wordpress-theming

twitter-bootstrap