Question

问题：

你看到它们之间的沟槽间距了吗？我想摆脱它并添加自定义的以匹配底部的边距。

这是页面的代码：

#posts
    .row
        - @posts.each do |post|
            .col-xs-12.col-sm-6.col-md-4.col-lg-3
                .post
                    .post_content
                        .title
                            %h2
                                = link_to truncate((post.title), length: 25), post
                        %p
                            $
                            = post.price
                        .post_image
                            = link_to image_tag(post.image.url), post
                        .data.clearfix
                            %p.username
                                Listing by
                                = post.user.name
                            %p.buttons
                                %span
                                    %i.fa.fa-comments-o
                                    = post.inquiries.count
                                %span
                                    %i.fa.fa-thumbs-o-up
                                    = post.get_likes.size

当然，CSS：

#posts {
    .post {
        margin: .5rem;
        border: 1px solid #9B9B9B;
        &:hover {
            border: 1px solid white;
        };
        .post_image {
            height: 20rem;
            overflow: hidden;
            img {
                width: 100%;
                border-radius: .3rem .3rem 0 0;
            }
        }
        .post_content {
            margin: 1rem;
            h2 {
                margin: 0;
                font-weight: 100;
                padding: 1rem;
                border-bottom: 1px solid #E4E4E4;
                font-size: 1.5rem;
                a {
                    text-decoration: none;
                    /*color: #333233;*/
                    &:hover {
                        color: #6E58E0;
                    }
                }
            }
            .data {
                /*padding: .75rem 5%;*/
                color: #969696;
                .username, .buttons {
                    margin: 0;
                    font-size: 1rem;
                }
                .username {
                    float: left;
                }
                .buttons {
                    float: right;
                    span {
                        margin-left: .5rem;
                    }
                }
            }
        }
    }
}

理想情况下，你应该告诉我如何设置它的样式，以便各个帖子是正方形，它们之间有均匀的边距。

Answer 1

在Sass版本的Bootstrap中，找到_variables.scss文件。搜索“$ grid-gutter-width”。您可以将此值调整为您想要影响装订线宽度的任何值。

默认的装订线宽度为：

   $grid-gutter-width:         30px !default;

将其更改为更小的内容以查看是否有效。

如果您正在使用已编译的Bootstrap版本，则必须调整这组疯狂的代码：

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

在此处调整左边的填充和填充 - 或者在你自己的css中覆盖它们。

Answer 2

只需添加此内容（另一个答案有相同的想法，但您不需要逗号，因为您正在使用HAML）：

.col-xs-12.col-sm-6.col-md-4.col-lg-3 {
    padding-right: 0;
    padding-left: 0;
}

原因是Boostrap的行预装了35px和15px的填充（不是边距）。因此，您需要重置它或设置自己的。

Answer 3

您不应该像大多数答案一样覆盖默认的CSS。要保留默认的bootstrap css，你可以使用它：

SELECT     A.eventid, A.label, A.value, COUNT(*) AS Taken
FROM         tbMultipurposeVertical AS A INNER JOIN
                      Speaking_Opportunities AS B ON A.value = B.TopicID
WHERE     (A.eventid = 'Q6UJ9A010X2B') AND (A.label = 'Topic ID')
GROUP BY A.label, A.eventid, A.value, B.Available

您可以将样式添加到customdiv。

EventID          label   topicid   Selected
333333333333    Topic ID    1        2
333333333333    Topic ID    5        1
333333333333    Topic ID    6        1

当你覆盖bootstrap css时，在你想要填充的地方你不再有填充。

行之间不需要的Boostrap沟槽间距/边距/填充

3 个答案: