Заставить фон .card-title расширяться до границы (без заполнения)? - PullRequest
Новая
       3

Заставить фон .card-title расширяться до границы (без заполнения)?

0 голосов
/ 23 января 2020

У меня есть простой bootstrap .card, и я не уверен, как заставить .card-title background простираться до краев border. Код приведен ниже, и здесь можно увидеть пример: https://jsfiddle.net/x6pmLk8c/

<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <style>
  .card{
    border: 1px solid black; /* set for visual purposes */
   }
  .card-title{
    background: blue;
  }
 </style>
</head>

<body>    
 <div class="card">
  <div class="card-body">
   <h3 class= 'card-title text-center mb-2'>Title</h3>
   <div class= 'card-text'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    veniam perspiciatis repellendus eligendi, dicta facere libero illum sed eum
    atque culpa facilis iure, hic maiores. Saepe cum illum, eaque!
   </div>
  </div>
 </div>
</body>

Похоже, что между содержимым .card и его border существует некоторое заполнение. Я пытался 

.card,
.card-title{
    padding: 0;
}

, но это не имело никакого эффекта. Кто-нибудь знает, как это исправить? Спасибо.

Ответы [ 2 ]

1 голос
/ 24 января 2020

Вырежьте и вставьте <h3 class= 'card-title text-center mb-2'>Title</h3> вне <div class="card-body"> , новая структура кода: 

<div class="card">
   <h3 class="card-title text-center mb-2">Title</h3>
   <div class="card-body">
       <div class="card-text">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus veniam perspiciatis repellendus eligendi, dicta facere libero illum sed eum atque culpa facilis iure, hic maiores. Saepe cum illum, eaque!
        </div>
   </div>
</div>
0 голосов
/ 23 января 2020

Оказывается, .card-body устанавливается с некоторыми начальными отступами. 

.card-body{
  padding: 0;
}

Исправлена ​​эта проблема.

...