Bootstrap-在较大的列周围包裹列 [英] Bootstrap - Wrapping Columns Around Larger Column

问题描述

我知道如何在Bootstrap中执行标准列等.但是，我有一些我尚未遇到的东西，而且我似乎无法在Google上找到答案.也许我不知道该怎么称呼，所以为什么找不到它.

I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.

我基本上有一堆盒子，右边有一个大盒子，下面还有更多的小盒子.我想我很困惑，因为通常我会有一行，宽4列，宽3列，但是较大的列需要占用多行..

I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..

这是我在油漆中做的一个简单例子:

Here is a quick example I made in paint:

较小的框有点像投资组合的缩略图，它们的大小都是相同的.较大的框是Twitter新闻提要，这是Twitter提供的div，用于在您的网站上放置新闻提要.

The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.

我不确定是否应该创建两个部分(上半部分和下半部分)或如何进行处理.我考虑过将最上面的部分分成两列，然后在第一部分将其分成两部分(6和6).然后像往常一样在其下方进行单独的编辑.

I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.

但是，您可以轻松地将图像添加到段落中并使文本环绕图像.我只想通过Twitter新闻提要和专栏来做同样的事情.

However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..

如果仍然遇到困难，我可以添加代码.

I can add code once I get an approach if I am still stuck.

我试图在第一列中放入另一组行和列，但它打破了列之间的间距，这意味着要添加CSS来固定间距.

I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.

希望某人做了这样的事情，或者可以从我的图像中看到如何解决这个问题.

Hoping someone has done something like this, or can see by my image, how to approach this.

推荐答案

尝试如下操作:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            row1-col1
            <div class="row">
                <div class="col-sm-6">
                    Sub-row1-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row1-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row2-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row2-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row3-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row3-Sub-col2
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            row1-col2
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row2-col1
        </div>
        <div class="col-sm-3">
            row2-col2
        </div>
        <div class="col-sm-3">
            row2-col3
        </div>
        <div class="col-sm-3">
            row2-col4
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row3-col1
        </div>
        <div class="col-sm-3">
            row3-col2
        </div>
        <div class="col-sm-3">
            row3-col3
        </div>
        <div class="col-sm-3">
            row3-col4
        </div>
    </div>
</div>

这篇关于Bootstrap-在较大的列周围包裹列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！