处理多个堆井的Bootstrap方式

I just started out using twitter bootstrap and so far I've had a nice experience.

我刚开始使用twitter bootstrap,到目前为止,我有一个很好的经历。

I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them

我目前在按照我希望的方式定位一些.well元素时遇到了一些麻烦。基本上,这是我想看到的

处理多个堆井的Bootstrap方式

But this is what I get

但这就是我得到的

处理多个堆井的Bootstrap方式

The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.

第二行显然与第一行重叠,因为元素是浮动的,并且行没有缠绕在.well元素周围。我试图申请.clearfix类,但遗憾的是它并没有解决这个问题。

Here's the html I'm currently using

这是我正在使用的html

<div class="container">
    <div class="row offset-top-large">
        <div class="col-md-9">
            <a href="#" class="well well-lg">

            </a>
        </div>
    </div>

    <div class="row offset-top">
        <div class="col-md-9">
            <a href="#" class="well well-lg">

            </a>
        </div>
    </div>
</div>

The .offset-top classes just add additional margins to the rows

.offset-top类只是为行添加了额外的边距

.offset-top-large{
    margin-top:100px;
}

.offset-top{
    margin-top:20px;
}

I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).

我知道我可以通过操纵css来解决这个问题,例如,移除浮点数,但我的问题是 - 我可以这样做(获得所需的输出)而无需添加任何额外的CSS并可能破坏引导功能(调整到较小的屏幕等)。

Edit

Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620

对不起,我发布了错误的大小类的代码 - 我现在已经纠正了这里,这是一个显示我的问题的小提琴 - http://www.bootply.com/127620

Thanks!

2 个解决方案

#1

Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.

基于你提供的html和css,这与浮动无关。问题是您的行中只有链接元素,默认情况下是内联元素。内联元素不占用容器元素中的任何空间。尝试添加display:block或display:inline-block到well元素。

#2

The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.

您的问题的更新不会发生很大变化,您只需要增加保证金以适应更大的井尺寸。

Try this:

.offset-top-large{
    margin-top:100px;
}

.offset-top{
    margin-top:50px;
}

Note: bantroth is also correct, adding display:block to your a tags is another solution.

注意:bantroth也是正确的,添加display:block到你的标签是另一种解决方案。

#1

#2

The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.

您的问题的更新不会发生很大变化,您只需要增加保证金以适应更大的井尺寸。

Try this:

.offset-top-large{
    margin-top:100px;
}

.offset-top{
    margin-top:50px;
}

Note: bantroth is also correct, adding display:block to your a tags is another solution.

注意:bantroth也是正确的,添加display:block到你的标签是另一种解决方案。

秒客网

处理多个堆井的Bootstrap方式

2 个解决方案

#1

#2

#1

#2

相关文章