Question

大家好我正在玩我的网站上的主要div并试图制作div

我正在使用bootstrap等，只是看看我能做什么，我想当我缩小尺寸等一切都变得非常糟糕但我想我可以使用媒体查询使它看起来更好，我的主要问题是在右边手边我试图在4个div之间做出差距，如果有人可以告诉我如何这将是辉煌的。如果还有另一种方法可以做到这一点，请让我知道，因为我正在学习，更多的知识=对我更好:)。

主要部分是：

<div class="righttBox">
</div>

这就是我想要在

之间获得空格

Answer 1

也许看看这个教程（Box-Model）。我宁愿认为你需要利润？

http://www.w3schools.com/css/css_boxmodel.asp

寻找浮动，浮动：左，浮动：右祝你好运!!!

Answer 2

我认为你所遇到的任何布局问题都可以通过Bootstrap的内置网格来解决，这使得布局非常容易。总的来说，我认为关于添加间距的具体问题将通过使用网格来解决。

供参考，以下是有关其网格和布局系统的文档部分：http://getbootstrap.com/css/#grid

这是我未经测试的代码，我认为这将设置您正在寻找的布局：

<div class="container">
    <!-- CONTENT CONTAINER -->
    <div class="row">
        <!-- BEGIN LEFT COLUMN -->
        <div class="col-md-2">
            Put left column content here
        </div>
        <!-- END LEFT COLUMN -->

        <!-- BEGIN MAIN COLUMN -->
        <div class="col-md-8">
            Put main column content here
        </div>
        <!-- END MAIN COLUMN -->

        <!-- BEGIN RIGHT COLUMN -->
        <div class="col-md-2">
            <!-- BEGIN FIRST ROW IN RIGHT COLUMN -->
            <div class="row">
                <div class="col-md-12">
                    Put 1st right box content here
                </div>
            </div>
            <!-- END FIRST ROW IN RIGHT COLUMN -->

            <!-- BEGIN SECOND ROW IN RIGHT COLUMN -->
            <div class="row">
                <div class="col-md-12">
                    Put 2nd right box content here
                </div>
            </div>
            <!-- END SECOND ROW IN RIGHT COLUMN -->

            <!-- BEGIN THIRD ROW IN RIGHT COLUMN -->
            <div class="row">
                <div class="col-md-12">
                    Put 3rd right box content here
                </div>
            </div>
            <!-- END THIRD ROW IN RIGHT COLUMN -->

            <!-- BEGIN FOURTH ROW IN RIGHT COLUMN -->
            <div class="row">
                <div class="col-md-12">
                    Put 4th right box content here
                </div>
            </div>
            <!-- END FOURTH ROW IN RIGHT COLUMN -->
        </div>
        <!-- END RIGHT COLUMN -->
    </div>
    <!-- END CONTENT -->
</div>

以下是它的工作原理：

在容器内定义一行。在你的图表中，这是最外面的黑盒子。

行内有3个div作为列，成为左，中，右列。左列和右列各使用2个网格列，总共4个，中间列留下8个。您可以根据需要进行调整，但它们的总和不得超过12（因为它是12列网格）。

对于正确的列，我们有4行，它们完成4个框，然后每个行都有一个div作为列，因为在Bootstrap中我发现你希望你的内容最终包含在一列中

我还应该提到右边的4个框使用所有12个网格列，即使它们只使用2（右列）在列内。原因是网格基于父行的宽度。所以在这种情况下，col-md-12表示“使用我父行的100％宽度”，这样它就会填满整个右列，即使右列不是页面宽度的100％。

我认为通过这种布局，你的大部分填充问题都会消失。

这假设我正确地解释了你的问题，希望我有！

Answer 3

<div class="col-size-number"></div>

col是constant for column 大小为lg，中等为md，小sm，x小为sx 号码范围是1 - 12

了解更多信息，请阅读http://getbootstrap.com/css/#grid

在div之间创建填充

3 个答案: