Как я могу использовать Bootstrap контейнер-жидкость со многими предметами внутри и без наружных желобов, но все еще с внутренними желобами? - PullRequest
Новая
       67

Как я могу использовать Bootstrap контейнер-жидкость со многими предметами внутри и без наружных желобов, но все еще с внутренними желобами?

0 голосов
/ 12 февраля 2020

Использование Bootstrap У меня часто есть разделы с большими панелями, а затем разделы с несколькими кнопками, а затем разделы с несколькими фотографиями или фрагментами данных (Dynami c). Я обнаруживаю, что мои кнопки и фрагменты необходимо удалить вручную. padding, а затем добавьте padding к средним сторонам каждого элемента. Так внешняя кнопка совпадает с панелями большего размера. Я должен использовать Bootstrap неправильно?

Так что, когда дело доходит до нескольких элементов / плиток в разделе, я не могу использовать тот же подход, что и кнопки, потому что я не могу указать c для плиток, которые имеют внутренние желоба и не имеют внешних желобов.

В настоящее время я думаю о крупной реорганизации, чтобы отсортировать это и, возможно, go вернуться к "стандартному bootstrap", но я не знаю, какой стандарт bootstrap должен выглядеть следующим образом.

В конечном счете, было бы неплохо иметь класс, который эффективно говорит: «без водосточных желобов». Я хочу, чтобы плитки касались моих внешних границ

Итак, вопрос в том, как у меня реагирующие текучие элементы / плитки (динамические c) без внешних желобов, но с внутренними желобами между каждой плиткой?

ОБНОВЛЕНИЕ:

Вопрос все еще остается , потому что это интересная проблема.

Но моя проблема исправлена ​​с реорганизацией моего bootstrap. Удаление моего стиля хака и то, что похоже на возвращение к стандартному подходу. Комментарии? Я смотрел на свои дивы неправильно. Моя основная панель была уничтожена, и все остальное было трудно выровнять.

Моя оригинальная BS была: 

<div id="insideform" class="container-fluid my_padding15">
    <!-- Start of Top Buttons Section-->
    <div class="row my_topmargin5" id="topbuttons">
        <div class="col col-4" style="padding-left:0px;">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="HOME">
        </div>
        <div class="col col-4">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="JOBS">
        </div>
        <div class="col col-4" style="padding-right:0px;">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="LOGOUT">
        </div>
    </div>
    <!-- Start of Data Section-->
    <div class="row my_panel my_topmargin5">
        <div class="col col-12 ">
            <h2 class="my_data">DATA</h2>
        </div>
    </div>
</div>

Моя BS теперь такая (добавление дополнительного div и удаление части моего хака) стиль): 

<div id="insideform" class="container-fluid">
    <!-- Start of Top Buttons Section-->
    <div class="row my_topmargin5" id="topbuttons">
        <div class="col col-4">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="HOME">
        </div>
        <div class="col col-4">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="JOBS">
        </div>
        <div class="col col-4">
            <input class="btn-lg btn-block alert-danger font-weight-bold" value="LOGOUT">
        </div>
    </div>
    <!-- Start of Data Section-->
    <div class="row my_topmargin5">
        <div class="col col-12">
            <div class="my_panel">
                <h2 class="my_data">DATA</h2>
            </div>
        </div>
    </div>
</div>

Так что теперь мой подход должен быть согласованным с использованием 3-х стэков: 1.Row, 2.Col, 3.My элемент с цветом фона.

NB, это не мой точный код, он сокращен, поэтому он может иметь технические ошибки, он не проверен. Дело в подходе, а не в точности.

...