CSS - Bootstrap - justify-content: space-between

0

Posiadam Bootstrapowe menu ↓

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta class="nav-lin" tags -->
    <meta class="nav-lin" charset="utf-8">
    <meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.0.1-dist/css/bootstrap.css" rel="stylesheet">
    <style>
      .container {
  	    max-width: 1170px;
      }
      .bg-dark {
        background-color: #90080a !important;
      }
      ul li {
        border-right: 1px solid #c88383;
      }
      ul li:last-child {
        border: none
      }
      .justify-content-center {
      	justify-content: space-between !important;
      }
    </style>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container">
      <header class="d-flex justify-content-center text-white bg-dark">
        <ul class="nav">
          <li>
            <a class="nav-link text-white py-3"  href="#">Trio Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Engagement Rings</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3 " href="#">More</a>
          </li>
        </ul>
      </header>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Chciałem uzyskać efekt jak podana na stronie → https://webkod.pl/kurs-css/wlasciwosci/uklad-elastyczny/justify-content wątek "space-between". Tak też uczyniłem nadpisując wartość "justify-content-center". Efekt mam do lewej. Co powinien wiedzieć, gdyż efekt chciałem uzyskać podobnie jak → https://i.imgur.com/JXoaFlo.png

0

justify-content:space-between będzie działać tylko na kontenerze, który ma ustawione display:flex.
Poza tym przypisujesz je do header, a podejrzewam, że interesuje cię wyrównanie zawartości ul.

Poza tym przypisywanie wartości space-between klasie o nazwie justify-content-center... no można, można też zrobić klasę:
.red {color:green}.

0

@Freja Draco: Zmodyfikowałem plik, poprawnie opisując ul. Czego jeszcze nie dopisałem, aby kontrolować rozkład elementów?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta class="nav-lin" tags -->
    <meta class="nav-lin" charset="utf-8">
    <meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.0.1-dist/css/bootstrap.css" rel="stylesheet">
    <style>
      .container {
  	    max-width: 1170px;
      }
      .bg-dark {
        background-color: #90080a !important;
      }
      ul.nav {
        justify-content: space-between;
      }
      ul li {
        border-right: 1px solid #c88383;
      }
      ul li:last-child {
        border: none
      }
    </style>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container">
      <header class="d-flex text-white bg-dark">
        <ul class="nav">
          <li>
            <a class="nav-link text-white py-3"  href="#">Trio Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Engagement Rings</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3 " href="#">More</a>
          </li>
        </ul>
      </header>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>
1

Jak już pisałam:
justify-content:space-between będzie działać tylko na kontenerze, który ma ustawione display:flex.

0

@Freja Draco: @Freja Draco: od początku miałem ustawiony display: flex dla ul, gdyż jest to zadeklarowane w klasie nav. Usunąłem d-flex pomogło. Obecnie borykam się z wypełnieniem na całym li dla pseudoklasyk :hover.
Nadal brakuje tutaj "jakiegoś" wyrównania, aby poprawnie wypełnić blok li.

Obecnie mam

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta class="nav-lin" tags -->
    <meta class="nav-lin" charset="utf-8">
    <meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.0.1-dist/css/bootstrap.css" rel="stylesheet">
    <style>
      .container {
  	    max-width: 1170px;
      }
      .bg-dark {
        background-color: #90080a !important;
      }
      .nav {
        justify-content: space-around;
      }
      ul li {
        border-right: 1px solid #c88383;
      }
      ul li:hover {
        background-color: #7b0204;
      }
      ul li:last-child {
        border: none
      }
      .nav-link {
        padding: 0.5rem 0;
      }

    </style>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container">
      <header class="text-white bg-dark">
        <ul class="nav">
          <li>
            <a class="nav-link text-white py-3"  href="#">Trio Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Engagement Rings</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3 " href="#">More</a>
          </li>
        </ul>
      </header>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>
1

Dopiero teraz zauważyłam, że linkujesz to do jakiegoś lokalnego bootstrapa, więc ktoś z zewnątrz nie zobaczy jak ta strona wygląda.
Zalinkuj do bootstrapa dostępnego w sieci, albo wystaw gdzieś całą stronę on-line.

0

To będzie


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta class="nav-lin" tags -->
    <meta class="nav-lin" charset="utf-8">
    <meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
      .container {
  	    max-width: 1170px;
      }
      .bg-dark {
        background-color: #90080a !important;
      }
      ul.nav {
        justify-content: space-around;
        flex-direction: row;
        position: static;

      }
      ul li {
        border-right: 1px solid #c88383;

      }
      ul li:hover {
        background-color: #7b0204;
      }
      ul li:last-child {
        border: none
      }
      .nav-link {
        padding: 0.5rem 0;
      }

    </style>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container">
      <header class="text-white bg-dark">
        <ul class="nav">
          <li>
            <a class="nav-link text-white py-3"  href="#">Trio Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Engagement Rings</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
          </li>
          <li>
            <a class="nav-link text-white py-3 " href="#">More</a>
          </li>
        </ul>
      </header>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>
1
Thommen napisał(a):

Obecnie borykam się z wypełnieniem na całym li dla pseudoklasyk :hover.
Nadal brakuje tutaj "jakiegoś" wyrównania, aby poprawnie wypełnić blok li.

Hover masz na a, niemniej to a wypełnia ci całe li, więc jest ok, ale że masz ustawione justify-content: space-around;, to wygląda, jak by nie wypełniało wszystkiego.

Ustaw se różne kolory dla ul, li i a, to będziesz wiedzieć, co jest gdzie.

0

To czego brakowało to

.nav-justified > .nav-link {
        flex-basis: auto;
      }

wraz z

<li class="nav-link">

Rozwiązanie to głównie

  flex-grow: 1

1 użytkowników online, w tym zalogowanych: 0, gości: 1