Карты в начальной загрузке не показывают границы (Bootstrap 3.4.0)

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

Во-первых, .cards заменил старый .panels в начальной загрузке 4.x (другими словами, карты не существуют в начальной загрузке v3.4.0)

Вы смешиваете .card с и .panel с, но вам нужно придерживаться одного типа компонента.

Либо вы используете только .panel s и bootstrap v3.4.x, либо переключаетесь на .card s и используете bootstrap 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>

Answer 2

• Если вы хотите быстрое решение, добавьте .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>

• Другой вариант - попробовать другую версию начальной загрузки.

Надеюсь, это поможет.