文章使用引导3推拉对齐
文章使用引导3推拉对齐
提问于 2013-09-27 09:01:16
我正在使用引导程序3，我试图为桌面上的文章提供一个特定的网格对齐。
在手机上，我想订购这篇文章的内容如下：
- 标题
- 图像
- 内容
在桌面上，我要左边的图片和右边的标题和内容。
这是我的密码
<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>但是有了这个代码，内容就在右边，但是在图像下面。
有什么简单的方法可以得到我想要的吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-09-27 10:31:22
基于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>Stack Overflow用户
发布于 2014-01-29 14:25:20
这是你的专栏课：
md: 4(图像)-8(标题) =>第1行(最多12列)
8(内容) =>新行
这将产生一个新的行，第二行放置在图像/标题列下面
因此，您必须使用以下列设置(使用隐藏类)：
md: 2(图像)-5(标题)-5(隐藏-xs隐藏-sm)
5(内容)
只需尝试以下代码：
CSS:
<style>
.col-md-2{
height: 300px;
background-color: blue;
color: white;
border: 2px solid red;
}
.col-md-4{
height: 100px;
}
.col-md-5{
height: 100px;
background-color: red;
color: white;
border: 2px solid black;
}
</style>HTML:
<article class="row">
<header class="col-md-5 col-md-push-2">
<a href="#">
<h2>Title</h2>
</a>
</header>
<div class="col-md-2 col-md-pull-5">
<figure>
<a class="thumbnail" href="#">
<img src="" alt="4x3 Image" class="img-responsive">
<figcaption>Caption</figcaption>
</a>
</figure>
</div>
<div class="hidden-xs hidden-sm">
<div class="col-md-4"></div>
</div>
<div class="col-md-5 col-md-pull-5">
<p>Content</p>
</div>
</article>也许这不能解决问题。但你可以用这个伎俩。
抱歉，我的英语不好
Stack Overflow用户
发布于 2013-09-27 09:22:54
使用一个更大的div，并在其中放置标题和文本，并在它们上使用引导程序的col-md-12类来相互叠加。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19046787
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号