LINUX.ORG.RU
Форум — Web-development  

Как выровнять нечетное количество ячеек по центру в Bootstrap 3?

 , , ,


0

2

На странице надо организовать ввод кода продукта из трех частей. Примерно так:

[1234]-[5678]-[9012]

Ввод нужен не по маске, а тремя полями ввода, с крупными цифрами. Между полями ввода должен быть нарисован символ-разделитель, например тире.

Ширина одного поля ввода - 3 ячейки. На символ-разделитель отводится одна ячейка. Получается, что итоговая ширина будет 3+1+3+1+3=11 ячеек.

И эти 11 ячеек мне нужно вывести по центру строки row.

У меня версточный кретинизм, я уже как только не пробовал, но передвинуть 11 ячеек в центр row у меня не получается.

Как это сделать?

Для затравки, вот нерабочий код:

        <div class="row">
            <div class="center-block col-xs-11" style="float: none; background-color: blue">
                <div class="row">
                    <div class="center-block">
                        <div class="col-xs-3"><input id="itemIdPart1" type="text" class="form-control"></div>
                        <div class="col-xs-1">-</div>
                        <div class="col-xs-3"><input id="itemIdPart2" type="text" class="form-control"></div>
                        <div class="col-xs-1">-</div>
                        <div class="col-xs-3"><input id="itemIdPart3" type="text" class="form-control"></div>
                    </div>
                </div>
            </div>
        </div>

★★★★★

Последнее исправление: Xintrea (всего исправлений: 1) 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="d-flex flex-row">
            <div class="p-2">
                <input id="itemIdPart1" type="text" class="form-control">
                <input id="itemIdPart1" type="text" class="form-control">
                <input id="itemIdPart1" type="text" class="form-control">
            </div>
            <div class="p-2">-</div>
            <div class="p-2">
                <input id="itemIdPart2" type="text" class="form-control">
                <input id="itemIdPart2" type="text" class="form-control">
                <input id="itemIdPart2" type="text" class="form-control">
            </div>
            <div class="p-2">-</div>
            <div class="p-2">
                <input id="itemIdPart3" type="text" class="form-control">
                <input id="itemIdPart3" type="text" class="form-control">
                <input id="itemIdPart3" type="text" class="form-control">
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
flappyright ★
()

col-xs-11

Bootstrap использует 12 колоночную сетку. То есть у вас при любом раскладе должно получится 12 колонок. Да и этот класс не используют на блоке-родителя, вроде.

class=«col-xs-3»

Если вам не подходит стандартный размер колонок, создайте свой класс, пропишите эму стили, и юзайте его на необходимом расширении экрана.

CryNet ★★★★★
()
Последнее исправление: CryNet (всего исправлений: 1)
Ответ на: комментарий от CryNet

создайте свой класс, пропишите эму стили, и юзайте его на необходимом расширении экрана

Это так надо заморочиться чтобы по центру выровнять?

Xintrea ★★★★★
() автор топика

Это так надо заморочиться чтобы по центру выровнять?

Нет. Это надо для того, чтобы не нарушать концепцию Bootstrap, где все сводится к 12 колонкам (у вас 11). Если нужна нестандартная ширина колонок, то большие колонки разбиваете на поменьше. Посмотрите на пример:

https://bootstrap-4.ru/docs/3.4/examples/jumbotron/

Возьмите за основу три колонки, в примере это col-md-4, у вас будет col-xs-4. Дальше в блоках с col-xs-4 создайте блок с классом row, а внутри row-а создайте две колонки: col-xs-11 — тут основной текст и col-xs-1 — тут будет ваш разделитель. Набросал на скорую руку: 

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-8">
                    <input id="itemIdPart1" type="text" class="form-control">
                </div>
                <div class="col-xs-4">
                  Разделитель
                </div>
              </div>
        </div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-8">
                    <input id="itemIdPart1" type="text" class="form-control">
                </div>
                <div class="col-xs-4">
                  Разделитель
                </div>
              </div>
        </div>
       <div class="col-xs-4">
          <div class="row">
              <div class="col-xs-8">
                  <input id="itemIdPart1" type="text" class="form-control">
              </div>
              <div class="col-xs-4">
                Разделитель
              </div>
            </div>
      </div>
      </div>
    </div>

CryNet ★★★★★
()
Ответ на: комментарий от CryNet

Не, так перекошено получается.

У меня 3 поля ввода и 2 разделителя.

А вы показали 3 поля ввода и 3 разделителя.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от CryNet

В общем, решение такое:

<div class="row">
    <div style="margin-left:8.33%"> <!-- Смещение в 8.33% сделано чтобы по центру отображалось 11 колонок -->
        <div class="col-xs-3"><input id="itemIdPart1" type="text"></div>
        <div class="col-xs-1">-</div>
        <div class="col-xs-3"><input id="itemIdPart2" type="text"></div>
        <div class="col-xs-1">-</div>
        <div class="col-xs-3"><input id="itemIdPart3" type="text"></div>
    </div>
</div>


Теперь осталось придумать, как разделители выровнять по центру по вертикали.

Xintrea ★★★★★
() автор топика
Последнее исправление: Xintrea (всего исправлений: 1)
Ответ на: комментарий от Xintrea

Это неправильно (работать-то будет, но подход сам неправильный). Создайте классы для своих блоков с необходимой шириной. Так будет проще и правильнее. Для нестандартных блоков так делают.

CryNet ★★★★★
()
Ответ на: комментарий от Xintrea

Не-не-не, я не об этом. Необходимо создать див-родитель (с классом row), а в нему блоки необходимой ширины: 

<div class="row">
    <div class="col-xs-custom">
        <div class="col-xs-custom__text"></div>
        <div class="col-xs-separator"></div>
    </div>
    <div class="col-xs-custom">
        <div class="col-xs-custom__text"></div>
        <div class="col-xs-separator"></div>
    </div>
    <div class="col-xs-custom">
        <div class="col-xs-custom__text"></div>
    </div>
</div>
Своим классам добавить стили

CryNet ★★★★★
()
Последнее исправление: CryNet (всего исправлений: 1)
Ответ на: комментарий от Xintrea

Если есть возможность, перейди на Bootstrap 4, там это все есть. Иначе лучше сделать свои классы и использовать flex.

gruy ★★★★★
()
Ответ на: комментарий от CryNet 
<div class="row">
    <div class="col-xs-3">
        <input>
    </div>
    <div class="col-xs-1">
        <div class="row">
            <div class="col-xs-6"></div>
            <div class="col-xs-6">-</div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-10">
                <input>
            </div>
            <div class="col-xs-1"></div>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="row">
            <div class="col-xs-6">-</div>
            <div class="col-xs-6"></div>
        </div>
    </div>
    <div class="col-xs-3">
        <input>
    </div>
</div>
deep-purple ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development