Dlaczego kolumny nie są centrujące z równymi spacjami między nimi w Bootstrap 5? Poniżej znajduje się link kodu i skrzypce.

https://jsfiddle.net/Juantamad/1o59TSQW/3/

<section>
  <div class="row text-center mb-5">
    <div class="col">Letters</div>
  </div>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 text-center container">
  <div class="col">
    <h2>A</h2>
    <p>B</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>C</h2>
    <p>D</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>E</h2>
    <p>F</a></p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>G</h2>
    <p>H</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
</div>
-1
Djangonow 29 lipiec 2020, 17:32

1 odpowiedź

Najlepsza odpowiedź

Nie są centrujące, ponieważ .text-center nie ma wpływu na kolumnę w tym samym stylu, który wykonuje tekst. Musisz użyć .justify-content-center. Brakuje im żadnych odstępów między nimi, ponieważ stosujesz własne niestandardowe CSS do atrybutu .col-*, dodając granicę i wyściółkę.

Stosujesz również .container do .row, który nie jest ważny w dowolnej wersji Bootstrap. Poprawiając deklaracje CSS i owijając zawartość każdej kolumny w elemencie do domu, w której chcesz wyściółki / tła, który chcesz osiągnąć swój cel.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<section class="container">
  <div class="row text-center mb-5">
    <div class="col">
      Letters
    </div>
  </div>

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 justify-content-center text-center">
    <div class="col">
      <div class="bg-light border p-3">
        <h2>A</h2>
        <p>B</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>C</h2>
        <p>D</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>E</h2>
        <p>F</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>G</h2>
        <p>H</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>
  </div>
</section>
1
Robert 29 lipiec 2020, 16:38