Bootstrap:为什么此列不浮动，我该如何更改? [英] Bootstrap: Why does this column not float and how can I change that?

问题描述

我用bootstrap 3建立了一个网站，其中有一个新闻版块，其中每个新闻文章应如下所示:

I built a website with bootstrap 3, it has a news section where each news article should look like the following:

移动优先:

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

在更大的屏幕上:

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

我不希望内容在图像周围浮动，它应该留在其列中，这就是为什么我试图使用引导程序来解决这个问题.

I don't want the content to float around the image, it should stay in its column, that is why I seek to solve this with bootstrap.

我已经对此提出了一个问题-并找到了解决方案-我现在认为这并不完美.问题.

I already asked a question about this - and found a solution - which I now see is not perfect. 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列按其应有的方式浮动，但content列却没有.为什么会这样?

While the img-columns floats as it should, the content column does not. Why is that?

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

I added a code snippet for that:

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

<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>	

推荐答案

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

It's because your changing the col order with push and pull. Since Bootstrap uses float:left the taller column on the right will wrap. One way to fix it is to use pull-right on the content column.

<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 )，如下所示..

To prevent the pull-right from affecting the float on small screens, you can use a CSS media query and custom class (pull-right-md) like this..

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

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

I updated the Codeply accordingly: http://codeply.com/go/jcXWNcbszw

这篇关于Bootstrap:为什么此列不浮动，我该如何更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！