引导列和填充不起作用答案

【问题标题】：bootstrap columns and padding not working引导列和填充不起作用
【发布时间】：2016-09-02 15:05:53
【问题描述】：

我是 bootstrap 的新手，我想有一个特定的视图组织，你可以在图像中看到它，但问题是我无法在我的 cols 之间设置填充。

            <div class="container">

                 <div class="row">

                    <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'>

                    <div class="row">
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>                             

                    </div></div>    

                    <div class="col-sm-9" style='border-radius: 5px;border: 2px solid red;'>
                        <div class="row">
                            <div class="col-sm-4 " style='border-radius: 5px;background-color:red;height:220px;'></div>
                            <div class="col-sm-4" style='border-radius: 5px;background-color:red;height:220px;'></div>
                            <div class="col-sm-4" style='border-radius: 5px;background-color:red;height:220px;'></div>          

                    </div>  </div>  

                </div>


            </div>

这就是我想要的以及我用这段代码得到的。

请帮帮我:) 谢谢

【问题讨论】：

如果课程没有更改，您将不会收到任何答案。您是在没有足够研究的情况下提出问题。

标签： css twitter-bootstrap

【解决方案1】：

也许你可以试试这个>twitter bootstrap grid system. Spacing between columns，他们已经设法回答了这个问题。

也试试这个：它渲染空间而不添加额外的 div。

<div class="row">
 <div class="col-md-6">
  <div class="col-md-12">
     Some Content.. 
  </div>
 </div>
 <div class="col-md-6">
  <div class="col-md-12">
     Some Second Content.. 
  </div>
 </div>
</div>

这将自动在 2 个 div 之间呈现一些空间。

【讨论】：

多么可悲，@NedalJedidi 先生，您在这里尝试过吗> [ col-md-offset-*](getbootstrap.com/css/#grid-offsetting) ，上面的链接提供了什么吗？

【解决方案2】：

你这个，它会根据模型定义你需要的网格。

    <head>
        <style>
            .col-sm-12 { margin:3px; width:280px;}
            .col-sm-3 { margin: 3px; }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="outer row">
                <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'>
                    <div class="row">
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>

                    </div>
                </div>
                <div class="col-sm-8" style='border-radius: 5px;border: 2px solid red;'>
                    <div class="inner row">
                        <div class="horcols-4 col-sm-3 " style='border-radius: 5px;background-color:red;height:220px;'></div>
                        <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div>
                        <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div>
                    </div>
                    <div class="col-sm-1" >
                    </div>
                </div>
            </div>
        </div>
    </body>

【讨论】：

【解决方案3】：

试试这段代码，看看是否足够

<style>
        .inner {
            box-sizing: border-box;
            padding: 1em;
        }

        .horcols-4.col-sm-3 {
            margin: 1.5em;
        }

    </style>
</head>

<body>

    <div class="container">

        <div class="outer row">

            <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'>

                <div class="row">
                    <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div>
                    <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                    <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>
                    <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>

                </div>
            </div>

            <div class="col-sm-9" style='border-radius: 5px;border: 2px solid red;'>
                <div class="inner row">
                    <div class="horcols-4 col-sm-3 " style='border-radius: 5px;background-color:red;height:220px;'></div>
                    <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div>
                    <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div>

                </div>
            </div>

        </div>


    </div>

</body>

【讨论】：

嗨，谢谢你的回答，但这不是我要找的，我需要一些东西来分隔列而不影响列号，我的意思是如果我使用 col- 4 我需要使用它我不想使用 col-3 否则它看起来很糟糕
bootstrap 的问题是，如果你使用 12 列网格并且占用 12 列，那么在这种情况下使用 flexbox 将不会留下任何边距空间