0

Всем привет. Только начал изучать bootstrap (3 версия), поэтому есть трудности (даже в терминологии). Возник такой вопрос: как отделить блоки div друг от друга? Имею в виду, чтобы на сайте содержимое этих блоков не было впритык. Вот например у меня есть 2 div-а, как написать, чтобы на сайте выглядело раздельно?

<body>

    <div class="row form-inline">
        <div class="col-sm-15">
            <label class="small">Варианты</label>
            <select class="form-control" title="" name="testGroup" id="testGroup194">
                <option selected="selected" value="">ALL</option>
                <option title="Вариант A" value="14">Вариант A</option>
                <option title="Вариант B" value="15">Вариант B</option>
                <option title="Вариант C" value="16">Вариант C</option>
            </select>
        </div>
        <div class="col-sm-16">
            <label class="small">Название</label>
            <input type="text" class="form-control" value="" name="patientName">
        </div>
    </div>

</body>

Также вопрос по коду (он не мой). Что значит col-sm-15 и col-sm-16? Это же вроде сетка, в которой максимум 12 столбцов возможно.

3
  • в 4.5 версии есть уже встроенные классы для организации отступов getbootstrap.com/docs/4.5/utilities/spacing 9 июл 2020 в 19:48
  • @AndreyMaslov, мне нужен способ в 3 версии bootstrap-а
    – qwerty1
    9 июл 2020 в 20:23
  • а в чем проблема подключить 4ую версию bootstrap? Они обратно совместимы, так что все будет в порядке
    – kertAW
    9 июл 2020 в 20:39

2 ответа 2

0

Например так:
<div class="row form-inline form-container">
(добавлен собственный класс form-container)

Далее в стилях прописать:

.form-container > div{
    margin: 10px 20px;
}
1
  • HaZcker, можно ли как-то обойтись без дополнительного файла css? Только средствами bootstrap-а?
    – qwerty1
    9 июл 2020 в 20:25
0

Например, добавить класс mr-10, он означает margin-right: 10px.

4
  • Извините за глупые вопросы, но куда конкретно нужно добавить этот класс в моём коде?
    – qwerty1
    9 июл 2020 в 20:22
  • к диву, как если бы вы его стилизовали
    – kertAW
    9 июл 2020 в 20:30
  • Я добавил mr-10 к диву, но ничего не изменилось. Это работает для bootstrap 3?
    – qwerty1
    9 июл 2020 в 20:32
  • насчет bootstrap 3 не уверен, сам работал только с 4ым
    – kertAW
    9 июл 2020 в 20:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.