Bootstrap: есть ли способ получить более плотный макет?

ProgramBox

Bootstrap: есть ли способ получить более плотный макет?

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#css #twitter-bootstrap

Вопрос:

Просто любопытно, есть ли способ получить более плотный макет с помощью bootstrap.

Почему между текстовыми элементами так много места? слишком много места

Неужели все это только для того, чтобы разместить планшеты, телефоны и т. Д.?

Есть ли какой-либо способ выбрать более жесткий стиль для всей страницы по умолчанию?

Я также думаю, что сами поля редактирования слишком велики. Между текстом и краем поля слишком много пустого места.

Почему они не немного плотнее?

Эти изменения были добавлены после попытки использовать код в ответе от NetworkNerd

Я добавил следующее в свою таблицу стилей.

   input[type=text]{
       padding-top:0px; padding-bottom:0px;
       margin-bottom:0px; /* Reduced from whatever it currently is */
       margin-top:0px; /* Reduced from whatever it currently is */
       height:24px;
    }

Эти дополнения делают мою форму похожей на следующую:

не совсем работает

Вы можете видеть, что все стало немного жестче, но это только из-за height:24px стиля.

Другие изменения, по-видимому, никак не влияют на внешний вид.

Кстати, таблица стилей, которая включает это изменение, является последней включенной.

Метки не выровнены

Кроме того, обратите внимание, что теперь, когда я изменил, метки не выровнены с соответствующим вводом текста.

Все еще слишком много полей между текстовыми полями

И все еще кажется, что между текстовыми полями слишком много свободного места.

Фрагмент HTML-кода для заголовка

Вот фрагмент HTML, который показывает HTML с примененными стилями начальной загрузки. Все это было просто скопировано из примеров на сайте bootstrap.

 <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="titleText" class="col-sm-2 control-label">Title</label>
            <div class="col-sm-6">
                <input id="titleText" class="form-control" type="text" ng-model="book.title" />
            </div>
        </div>

1. Люди, которые создали Bootstrap, как воздух.

2. У меня есть одно слово, чтобы описать это: минимализм. На самом деле, давайте добавим еще один: Flat.

3. Aibrean, NetworkNerd — так вы, ребята, согласны со мной в этом, верно? Макет по умолчанию слишком толстый. Очень многое в bootstrap легко настраивается. Мне просто интересно, почему они не сделали тощий вариант.

4. Вот для чего нужна МЕНЬШАЯ настройка . Они создали область настройки, чтобы вы могли вводить свои собственные значения для индивидуального вывода CSS. Они включили туда заполнение ( @input-height-base ).

5. @daylight — Взгляните на мой ответ, он может предоставить вам вариант, который позволит избежать использования дополнительного CSS

Ответ №1:

Bootstrap не рекомендует редактировать bootstrap.css себя. В соответствии с рекомендациями рекомендуется изменить стиль начальной загрузки в другом, доминирующем файле CSS.

Попробуйте сделать что-то вроде этого:

Пользовательский CSS

 input[type=text]{
   padding:0px;
   margin-bottom:2px; /* Reduced from whatever it currently is */
   margin-top:2px; /* Reduced from whatever it currently is */
}

По картинке трудно сказать, является ли это поле сверху или снизу. Вы можете удалить margin-[top|bottom] , основываясь на результатах вашего тестирования.

Также возможно, что input элемент не имеет поля, вместо этого это может быть label элемент (Bootstrap, по крайней мере, по моему опыту, делает некоторые странные вещи с label элементом …)

Еще одно редактирование: мне нравится давать людям варианты. Поэтому, если это в table элементе, рассмотрите возможность добавления table-condensed класса в table тег, чтобы уменьшить часть пробелов между элементами, как показано ниже:

 <table class="table table-condensed">

1. Я могу подтвердить, что это будет работать, так как это то, что я использую в своей (не в Twitter Bootstrap) форме входа на сайт.

2. Сейчас я работаю с этим и тестирую его. Это отличный пример, который поможет мне двигаться в правильном направлении. После того, как я поработаю с ним, я вернусь позже или через день или два и отмечу его как ответ. Еще раз спасибо.

3. Я добавил собственное решение в свой ответ. Вы можете использовать form-control-sm в Bootstrap 4 или input-sm в Bootstrap 3.

Ответ №2:

В Bootstrap 4 вы можете использовать form-control-sm класс. Смотрите https://getbootstrap.com/docs/4.1/components/forms/#sizing

Это взято непосредственно из документации по начальной загрузке,

 <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

До начальной загрузки 4 вы могли бы использовать input-sm . Смотрите https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

Ответ №3:

Вы можете зайти в bootstrap.css и найти значения отступов и полей и изменить их или сделать это в другой таблице стилей

1. муук — это звучит так болезненно. Вы делали это сами? Просто любопытно. Я бы определенно создал его как отдельный CSS, чтобы я мог реагировать на управление версиями bootstrap. Интересно, сколько мне придется переопределить. Спасибо.

2. Лучше всего использовать отдельную таблицу стилей — переопределение файла по умолчанию может создать сложности в долгосрочной перспективе.

3. Я бы никогда этого не сделал. Как говорят другие, просто переопределите стиль.

4. Я сказал, что вы можете сделать это в другой таблице стилей, ребята, успокойтесь

5. Я думаю, потому что я был ленив, но я согласен, что я должен был предотвратить путаницу