Question

卡在引导程序3.4.0版本中不显示边框。我正在尝试在面板中放置多张卡片。

尝试包括对边境很重要的内容，并尝试了边境主要mb-3和其他服务

<div class="panel panel-default">
  <div class="panel-heading" style="height: 30px; padding: 5px">
    <h4 class="panel-title">
      <a class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
    </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse in">
    <div class="row">
      <div class="col-sm-6" style="padding-left:30px">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想要带有边框的卡片。

Answer 1

如果需要快速解决方案，请将.border-primary { border: 1px solid #007bff; }添加到CSS。在摘要中查看：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="panel-heading" style="height: 30px; padding: 5px">
<h4 class="panel-title">
<a class="accordion-toggle" role="button" data-toggle="collapse"
data-target="#collapse4" aria-expanded="false"
style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse in">
<div class="row">
<div class="col-sm-6" style="padding-left:30px">
<div class="card border-primary mb-3">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to 
additional content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-primary mb-3">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to 
additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<style>
  .border-primary { border: 1px solid #007bff; }
</style>

另一种选择是尝试使用另一个引导程序版本。

希望有帮助。

Answer 2

首先，.cards替换了bootstrap 4.x中的旧.panels（换句话说，bootstrap v3.4.0中不存在卡）

您正在混合.card和.panel，但是您需要坚持使用一种类型的组件。

要么仅使用.panel s并引导v3.4.x，要么切换到.card s并使用引导v4.x（最好是最新的）

我迅速将所有panels切换为cards（使用bootstrap v4.x）并删除了内联CSS（因为在我的示例中不需要它），这是下面的结果（请参见演示）

您正在寻找什么吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card card-default">
  <div class="card-heading">
    <h4 class="card-title">
      <a class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
    </h4>
  </div>
  <div id="collapse4" class="card-collapse collapse in">
    <div class="row">
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">
              With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">
              With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

引导程序中的卡未显示边框（引导程序3.4.0）

2 个答案: