2列布局推下其他内容 [英] 2 column layout pushing other content down

问题描述

问题图片： http://expansion-mc.com/layout.png

正如您从图片中可以看到的，我有一个2列博客，其中包含推动其他内容的内容。我该如何做到这一点，以便内容紧密结合在一起，并且没有由右栏引起的差距。

HTML：

 < div class =col-md-6 blog-post pull  - > 
< h3 id =sample_postTitleclass =post-title> 
服务器周围的亮点＃2 
< / h3> 
< hr class =blog-hr> 
< p id =sample_postContentclass =post-content> 
 Content 
< / p> 
< hr class =pull-left blog-hrwidth =5％> 
 由< i> MrDarrenGriffin< i>发布，2014年11月22日
< / sup> 
< hr class =pull-left blog-hrwidth =10％> 
< / div> 
  

解决方案

如果我正确理解您的问题，

  .no-gutter> [class * ='col-'] {
 padding-right：0;填充左：0; 
} 
  

然后在你的包含行中添加no-litter

Image of problem: http://expansion-mc.com/layout.png

As you can see from the image, I have a 2 column blog which has content that pushes other content down. How can I make it so that the content is tight together and doesn't have the gap caused by the right column. I am using Bootstrap.

HTML:

<div class="col-md-6 blog-post pull-">
    <h3 id="sample_postTitle" class="post-title">
        Highlights from around the server #2
    </h3>
    <hr class="blog-hr">
    <p id="sample_postContent" class="post-content">
        Content
    </p>
    <hr class="pull-left blog-hr" width="5%">
    <sup class="pull-left text-muted post-meta">
        posted by <i>MrDarrenGriffin</i>, 22nd November 2014
    </sup>
    <hr class="pull-left blog-hr" width="10%">
</div>

解决方案

If I understood your issue correctly this might be of help

.no-gutter > [class*='col-'] {
    padding-right:0; padding-left:0;
} 

Then add no-litter to your containing row

这篇关于2列布局推下其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！