gpt4 book ai didi

css - Bootstrap 列和填充不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 02:27:34 26 4
gpt4 key购买 nike

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

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

这是我想要的以及我通过这段代码得到的。

enter image description here

enter image description here

请帮助我:)谢谢

最佳答案

试试这个代码,看看它是否足够

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

关于css - Bootstrap 列和填充不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37091048/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com