Question

我是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>

这就是我想拥有的以及我用这段代码得到的东西。

请帮助我:) 感谢

Answer 1

尝试此代码并查看是否足够

<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>

Answer 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>

Answer 3

也许你可以尝试这个＆gt; 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之间渲染一些空格。

bootstrap列和填充不起作用

3 个答案: