Наползание блоков друг на друга

182

02 августа 2018, 15:10

есть проблема в выравнивании элементов, на данный момент, есть такое (лишнее в коде убрал, чтобы была видна только необходимая структура), используется Bootstrap v3.3.7:

<div class="row">
<div class="col-md-6">
    <div class="tile">
        <h3 class="tile-title">Категории новости</h3>
        <div class="container">
            <div class="row">
                <div class="toggle-flip col-md-2">
                    <label>
                        <input class="checkbox" type="checkbox">
                        <span
                                class="flip-indecator"
                                data-toggle-on="Вкл"
                                data-toggle-off="Выкл"
                        ></span>
                    </label>
                </div>
                <div class="col-md-6">
                    <p class="title"></p>
                </div>
                <div class="btn-group col-md-4">
                    <a class="btn btn-primary"><i class="fas fa-arrows-alt"></i></a>
                    <a class="btn btn-primary"><i class="fa fa-lg fa-edit"></i></a>
                    <a class="btn btn-primary"><i class="fa fa-lg fa-trash"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Внешне получается так:

Когда уменьшаешь страницу получается так:

Как сделать, чтобы блоки не налазили друг на друга?

Answer 1

Лучше не исползуй готовые решения типа бутстрап и у тебя будет все прекрасно работать и понимание лучше придет. Лучше всего это сделать с использозванием flexbox. Вот пример:

<div class="flex">
    <div class="left">
        <input class="checkbox" type="checkbox">
        <span class="flip-indecator" data-toggle-on="Вкл"data-toggle-off="Выкл"></span>
    </div>
    <div class="right">
        <a class="btn btn-primary"><i class="fas fa-arrows-alt"></i></a>
    </div>
</div>

А стили для .flex такие :

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Вот и все, минимум кода и работает на ура, гугли что такое флексбокс и ты за будешь про бутстрап.

Answer 2

Примерно вот так должно это все выглядеть, правда стоит отметить то, что для col-sm и col-xs не указываю нужные соотношения, так как не знаю что вы хотите добиться на мобильных телефонах и планшетах...

<div class="container"> 
    <h3 class="tile-title">Категории новости</h3>
    <div class="row">      
        <div class="col-lg-2 col-md-2">
            <div>
                <input class="checkbox" type="checkbox">
                <span class="flip-indecator" data-toggle-on="Вкл"data-toggle-off="Выкл"></span>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <p class="title"></p>
        </div>
        <div class="btn-group col-lg-4 col-md-4">
            <a class="btn btn-primary"><i class="fas fa-arrows-alt"></i></a>
            <a class="btn btn-primary"><i class="fa fa-lg fa-edit"></i></a>
            <a class="btn btn-primary"><i class="fa fa-lg fa-trash"></i></a>
        </div>
    </div>
</div>