使用引导程序进行文章推/拉对齐3 [英] Article push/pull alignment using bootstrap 3

问题描述

在移动设备上我想订购文章的内容，如下所示：

我使用的是bootstrap 3， ：

1. 标题


2. 图片


3. li>
   

在桌面上，我想要左侧的图片，右侧的标题和内容。

这是我的代码

 < article class =row 
< header class =col-md-8 col-md-push-4> 
< a href =＃> 
< h2>标题< / h2> 
< / a> 
< / header> 
< div class =col-md-4 col-md-pull-8> 
< figure> 
< a class =thumbnailhref =＃> 
< img src =...alt =4x3 Imageclass =img-responsive> 
< figcaption> Caption< / figcaption> 
< / a> 
< / figure> 
< / div> 
< div class =col-md-8 col-md-push-4> 
< p>内容< / p> 
< / div> 
< / article> 
  

但是使用此代码，内容在右侧但在图像下。

<

解决方案

基于上可能实现此移动/桌面布局使用Bootstrap？ （或其他网格）

css：

  .floatright {float：right;} 
 @media（max-width：768px）
 {
 .floatright {float：none;} 
} 
  

html：

 < div class =containerstyle =background-color：green> 
< article class =row> 
< header class =col-md-8 floatright> 
< a href =＃> 
< h2>标题< / h2> 
< / a> 
< / header> 
< div class =col-md-4> 
< figure> 
< a class =thumbnailhref =＃> 
< img src =...alt =4x3 Imageclass =img-responsive> 
< figcaption> Caption< / figcaption> 
< / a> 
< / figure> 
< / div> 
< div class =col-md-8 floatright> 
< p>内容< / p> 
< / div> 
< / article> 
< / div> 
  

I'm using bootstrap 3 and I try to have a specific grid alignment for article on desktop.

On mobile I want to order content of the article like that :

1. Title
2. Image
3. Content

On desktop, I want the image on the left and the title and content on the right.

Here is my code

<article class="row">
    <header class="col-md-8 col-md-push-4">
        <a href="#">
            <h2>Title</h2>
        </a>
    </header>
    <div class="col-md-4 col-md-pull-8">
        <figure>
            <a class="thumbnail" href="#">
        <img src="..." alt="4x3 Image" class="img-responsive">
                <figcaption>Caption</figcaption>
            </a>
        </figure>
    </div>
    <div class="col-md-8 col-md-push-4">
        <p>Content</p>
    </div>
</article>

But with this code, the content is on the right but under the image.

Is there a simple way to get what I want ?

解决方案

Based on Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

css:

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

html:

<div class="container" style="background-color:green">
<article class="row">
    <header class="col-md-8 floatright">
        <a href="#">
            <h2>Title</h2>
        </a>
    </header>
    <div class="col-md-4">
        <figure>
            <a class="thumbnail" href="#">
        <img src="..." alt="4x3 Image" class="img-responsive">
                <figcaption>Caption</figcaption>
            </a>
        </figure>
    </div>
    <div class="col-md-8 floatright">
        <p>Content</p>
    </div>
</article>
</div>

这篇关于使用引导程序进行文章推/拉对齐3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！