To istniejące pytanie dotyczy bootstrapu 3: Przesunięcie Bootstrapa 3 po prawej, a nie po lewej

Chcę znaleźć przykład Bootstrap 4, w którym lewy element div ma spację po prawej stronie, co zapobiega umieszczaniu kolejnego rodzeństwa w tym samym wierszu, w taki sam sposób, w jaki przesunięcie przesuwa element div w prawo (ale przeciwnie)?

Chcę, aby wiele dynamicznych elementów DIV w jednym wierszu i używanie 1 lub 2 klas wymusiło, aby którykolwiek z tych elementów DIV był sam przesunięty w lewo we własnym wierszu, a następujący element DIV znajdował się w następnym wierszu, tak jak w tym kodzie, ( ale bez pustego elementu div jako odstępnika):

<style>
    .row {
        background: #f8f9fa;
        margin-top: 20px;
    }

    .col {
        border: solid 1px #6c757d;
        padding: 10px;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col col-3 offset-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
        <div class="col col-3">
            1 of 1
        </div>
        <div class="col col-9">

        </div>
        <div class="col col-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
    </div>
</div>

Wynik, który chcę Mimo że ten kod osiąga wynik, używając dodatkowego elementu div do wypełnienia przestrzeni, nie jest to idealne rozwiązanie, ponieważ chcę mieć możliwość iteracji moich danych i tworzenia elementów div na element danych bez konieczności dodawania dodatkowych elementów div, aby osiągnąć ten wynik , na pewno istnieje sposób na modyfikator klasy, aby to zrobić za pomocą bootstrap.

1
NZ Dev 20 grudzień 2019, 04:39
Nie ma prostego sposobu na osiągnięcie tego AFAIK. Nie można wymusić zawinięcia/przerwania w elementach potomnych flexbox bez dodania kolejnego elementu div stackoverflow.com/questions/29732575/…
 – 
Zim
20 grudzień 2019, 15:13

1 odpowiedź

Próbowaliśmy rozwiązać Twój problem za pomocą selektora. Spróbuj tego kodu.

.row {
        background: #f8f9fa;
        margin-top: 20px;
    }

    .col {
        border: solid 1px #6c757d;
        padding: 10px;
    }
    .row > [class*="col"]:nth-child(4n){
      margin-right: 75%;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col col-3 offset-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
        <div class="col col-3">
            1 of 1
        </div>
        <div class="col col-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
    </div>
</div>
0
Yudiz Solutions 20 grudzień 2019, 09:49