面板标题留下带面板边框的填充

Question

上面的代码片段是以下代码的结果 - （我已经使用了css的bootstrap）

<div class="container" >
            <div id=" row" style="margin-top: 140px;">
                <div class="panel col-md-6" style="background-color: yellow">
                    <div class="panel-heading" style="background-color: gray">

                    </div>
                </div>
                <div class="panel col-md-6" style="background-color: greenyellow">
                    <div class="panel-heading" style="background-color: sienna;width:fit-content;"></div>
                </div>


            </div>
        </div>

这里的绿色和黄色是面板; Sienna和灰色是面板标题。为什么面板标题会在两端留下填充？如何在这里将标题符合面板宽度？

Answer 1

你不应该将col-md- *与其他类一起使用。它是网格系统和＆＃34;单元格的一部分。被填充到左侧和右侧。

这应该是您的代码，虽然它不能解决您的问题： 你不应该将col-md- *与其他类一起使用。它是网格系统的一部分。 你需要使用更多的div元素：

         <div class="container" >
            <div id=" row" style="margin-top: 140px;">
                <div class="col-md-6" style="background-color: yellow">
                    <div class="pannel">
                        <div class="panel-heading" style="background-color: gray">

                    </div>
                    </div>
                </div>
                <div class="col-md-6" style="background-color: greenyellow">
                    <div class="pannel">
                        <div class="panel-heading" style="background-color: sienna">

                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 2

.row类添加15px的负填充。

.col-xx-xx类添加15px的正填充。

要没有这个填充，只需在特定的类中删除它。

这里：

.panel{
   padding: 0px;
}