引导面板标题与行导致边框粘到面板主体填充宽度答案

【问题标题】：boostrap panel-heading with row causing border stick to panel-body padding width引导面板标题与行导致边框粘到面板主体填充宽度
【发布时间】：2020-09-29 16:19:53
【问题描述】：

我正在尝试在可折叠面板内设置一个可折叠面板，但我需要嵌套面板在标题中有 3 列，因此我使用的是一行。问题是，一旦我添加了 row 和 container-fluid 类，面板标题的底部边框就会粘在面板主体填充宽度的宽度上。请参阅下面的面板标题边框如何不跨越整个面板标题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    
        

</head>
<body style="padding-top:10px"></body>

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapseum1">This is a test</a>
            </h4>
        </div>
        <div id="collapseum1" class="panel-collapse collapse">
            <div class="panel-body">
                <b>Description:</b> idk
                <div class="panel panel-info container-fluid">
                  <div class="panel-heading row">
                    
                      <div class="col-xs-1"><h4 class="panel-title"><a data-toggle="collapse" href="#collapseum1sub1"><b>Col1</b></a></h4></div>
                      <div class="col-xs-3 text-left">Col2</div>
                      <div class="col-xs-8 text-left">Col3</div>
                    
                  </div>
                  <div id="collapseum1sub1" class="panel-collapse collapse">
                    <div class="panel-body">
                        <b>More stuff</b>
                    </div>
                  </div>
              </div>
          </div>
       </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

将在单个元素上执行很多操作的类组合起来通常不是一个好主意。此外，您根本不需要容器，因为标题具有适当的填充。所以移动标题元素内的行并保持分开：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="padding-top:10px"></body>

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapseum1">This is a test</a>
      </h4>
    </div>
    <div id="collapseum1" class="panel-collapse collapse">
      <div class="panel-body">
        <b>Description:</b> idk
        <div class="panel panel-info">
          <div class="panel-heading">

              <div class="row">
                <div class="col-xs-1">
                  <h4 class="panel-title"><a data-toggle="collapse" href="#collapseum1sub1"><b>Col1</b></a></h4>
                </div>
                <div class="col-xs-3 text-left">Col2</div>
                <div class="col-xs-8 text-left">Col3</div>
              </div>

          </div>
          <div id="collapseum1sub1" class="panel-collapse collapse">
            <div class="panel-body">
              <b>More stuff</b>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

不客气，但不鼓励“谢谢”cmets。请take the tour了解更多。