webdonsk.ruКак сделать расстояние между input css
Добавил пользователь Владимир З. Обновлено: 10.09.2024
Я хочу дать промежуток между кнопками, есть способ дать интервал, используя бутстрап, чтобы они были согласованы для разных разрешений экрана.
Я попытался использовать margin-left Но это правильный способ сделать это.
ОТВЕТЫ
Ответ 1
Ответ 2
Вы можете достичь путем использования начальной загрузки Spacing. Bootstrap Spacing включает в себя широкий диапазон сокращенных чувствительных полей и отступов. В приведенном ниже примере mr-1 устанавливает margin или padding в $spacer *.25.
Вы можете узнать больше на Bootstrap Spacing.
Ответ 3
- Оберните свои кнопки в div с помощью class='col-xs-3' (например).
- Добавьте class="btn-block" к вашим кнопкам.
Это обеспечит постоянный интервал.
Ответ 4
Если вы хотите использовать маржу, удалите класс на каждой кнопке и используйте селектор CSS : last-child.
Html:
Css:
Ответ 5
Зависит от того, сколько места вы хотите. Я не уверен, что согласен с логикой добавления "col-XX-1" между каждой из них, потому что вы затем определяете весь "столбец" между ними.
Если вы просто хотите "немного интервала" между каждой кнопкой, мне нравится добавлять дополнения к охватывающей строке. Таким образом, я все еще могу использовать все 12 столбцов, включая "пробел" между каждой кнопкой.
Ответ 6
Использовать класс btn-primary-spacing для всех кнопок remove margin-left class
CSS будет выглядеть следующим образом:
Ответ 7
Вы можете использовать встроенный интервал из Bootstrap, поэтому нет необходимости в дополнительном CSS. Это для Bootstrap 4.
Ответ 8
Добавление полей к кнопке делает его более широким, так что кнопки лепестков вписываются в сетку. Если важен только визуальный эффект, тогда дайте кнопке белую рамку с [style = "margin: 0px; border: solid white;" ] Это оставляет неизменной ширину кнопки.
Ответ 9
с помощью бутстрапа вы можете добавить
Ответ 10
Оригинальный код в основном там, но вам нужно btn-group вокруг каждой кнопки. В Bootstrap 3 вы можете использовать панель инструментов btn и группу btn, чтобы выполнить работу; Я не сделал BS4, но он имеет аналогичные конструкции.
Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.
Базовая разметка
Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.
Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.
Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.
Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome.
Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.
Начальная настройка
Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:
Базовый стиль
Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы.
Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное ( relative ) положение.
Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field . Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.
Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.
Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.
Эффект всплывающей метки
Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем.
Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.
Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.
При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required . Однако стоит учитывать, что это работает только для обязательных полей.
Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.
Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.
Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.
Вывод
Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код.
Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.
В качестве рассматриваемого элемента, у которого необходимо сделать отступ, может быть текст, изображение, таблица или любой другой HTML-элемент. Главное – это следовать некоторым важным правилам, о которых я сейчас расскажу.
Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:
Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.
Допустим, у вас есть такой элемент верстки:
Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):
Что здесь видно? Что ширина элемента в первом варианте (без использования свойств) стала больше указанной за счет добавленных отступов, что является не совсем удобным и правильным в плане верстки.
А теперь, собственно, поговорим о вариантах организации отступов у элементов на вашем сайте с наглядными примерами.
Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:
со своими стилями:
Визуальный вариант получается таким:
Визуально это получается так:
Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.
Всего существует два варианта указания сторон, с которых необходимо сделать отступы.
Первый – это с явным указанием сторон:
В таком случае для каждой стороны используется свое свойство. И второй:
Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так: первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.
Этот тип отступов хорошо подходит для разделения текста, содержания ячеек таблиц и прочей текстовой информации. Для разделения же самих элементов, подобных тем, что в примере выше, существует другое свойство.
Вариантов добавления здесь также два.
Первый – с явным указанием стороны:
Второй – с перечислением значений, каждое из которых соответствует своей стороне:
Используем margin со следующим значением:
Визуально это будет выглядеть так:
Как видно из примера, в таком случае добавляется внешний отступ, разделяющий между собой указанные элементы.
Важная особенность: если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.
Этот вариант отступов часто используется в тексте, а именно в оформлении параграфов, а также в элементах, которые имеют видимые границы.
Но оба свойства не ограничиваются лишь этими элементами. Варианты их использования вы выбираете сами, я лишь постарался преподнести вам основу о них.
Задать ширину текстового поля в пикселах через стили.
Решение
Ширина текстового поля, создаваемого с помощью тега , определяется стилевым свойством width , значение которого можно устанавливать в пикселах, процентах или других допустимых единицах, как показано в примере 1.
Пример 1. Ширина поля
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже.
Рис. 1. Текстовое поле с фиксированной шириной
В данном примере задана ширина поля в пикселах путем добавления свойства width к идентификатору поля user .
Заметьте, что ширина поля также определена с помощью атрибута size тега , но в случае применения стилей этот параметр игнорируется.
Читайте также: