Question

我使用bootstrap 3构建了一个网站，它有一个新闻部分，每个新闻文章应该如下所示：

移动先行：

------------
|  Title   |
------------
------------
|  Img     |
------------
------------
|  Content |
|  Content |
------------

在更大的屏幕上：

---------------------------
|  Img  |  Title          |
|       |------------------
|-------|  Content        |
|       |  Content        |
---------------------------

我不希望内容在图像上浮动，它应该保留在其列中，这就是为什么我试图用bootstrap来解决这个问题。

我已经问了一个关于这个的问题 - 并找到了一个解决方案 - 我现在看到的并不完美。 question

如果我使用以下代码：

<div class="container"> 
    <div class="row">
        <div class="col-md-8 col-md-push-4">Title</div>         
        <div class="col-md-4 col-md-pull-8">Img<br>IMg<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br></div>
        <div class="col-md-4 col-md-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
    </div>
</div>

我明白了：

---------------------------
|  Img  |  Title          |
|       |------------------
|-------| 
|-------|------------------
|       |  Content        |
|       |  Content        |
---------------------------

虽然img-columns按原样浮动，但内容列却没有。那是为什么？

我为此添加了一个代码段：

＆＃13;

[class*="col"]{
  border: 1px solid black;
  }

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


	<div class="container">	
		<div class="row">
			<div class="col-sm-8 col-sm-push-4">Title</div>			
			<div class="col-sm-4 col-sm-pull-8">Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br></div>
			<div class="col-sm-4 col-sm-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
		</div>
	</div>

＆＃13;

Answer 1

这是因为您使用push和pull更改了排序顺序。由于Bootstrap使用float:left，右侧较高的列将换行。解决此问题的一种方法是在内容列上使用pull-right。

<div class="container"> 
    <div class="row">
        <div class="col-md-8 col-md-push-4">Title</div>         
        <div class="col-md-4 col-md-pull-8 pull-right">Img<br>IMg<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br></div>
        <div class="col-md-4 col-md-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
    </div>
</div>

http://www.codeply.com/go/jcXWNcbszw

修改

为了防止pull-right影响小屏幕上的浮动，您可以像这样使用CSS媒体查询和自定义类（pull-right-md）..

@media (min-width: 991px) { .pull-right-md { float:right; } }

我相应更新了Codeply：http://codeply.com/go/jcXWNcbszw

Bootstrap：为什么这个列不浮动，我该如何更改？

1 个答案: