Как сделать кнопки в html в столбик

.btn-group button background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
>

.btn-group button:not(:last-child) border-right: none; /* Prevent double borders */
>

/* Clear floats (clearfix hack) */
.btn-group:after content: «»;
clear: both;
display: table;
>

/* Add a background color on hover */
.btn-group button:hover background-color: #3e8e41;
>

Постановка кнопок в столбец css

Подскажите, пожалуйста каким образом поставить кнопки в один столбец в css или html в asp.net mvc

страница код кнопок

Вот такое решение:

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как создавать макеты веб-форм на CSS сетке

В этом уроке мы рассмотрим как создавать несколько различных веб-форм, используя CSS сетку. Для каждого примера, сначала мы будем использовать плавающие элементы, а затем посмотрим, как сделать такой же макет используя CSS сетку.

Если у вас ни малейшего представления о CSS сетках, посмотрите нашу серию для начинающих Understanding the CSS Grid Layout Module (Понимание модуля компоновки CSS сетки). Приступим!

1. Базовая форма регистрации

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

С «обычным» CSS

При обычном подходе к такому макету, могут быть использованы плавающие элементы, для создания наших столбцов. Заметьте, что у нас нет элемента, в который вложена форма; мы будем оформлять метки и поля ввода напрямую.

Вы видите, что мы используем здесь calc( ), что позволяет нам сделать левый столбец фиксированной ширины в 200 пкс, а правый оставить плавающим.

А вот результат, с кое-какими стилями для наглядности:

Макет с CSS сеткой

Нашей задачей, при использовании сетки, является — задать два столбца, а затем разместить каждый элемент в нужном столбце.

На первом шаге, зададим нашу сетку на родительский элемент form :

Затем, нам нужно разделить эту сетку, используя grid-template-columns :

В CSS коде выше, первый столбец будет иметь ширину 200px , а второй примет 1fr (одна «fraction» — часть/доля) от оставшегося свободного места.

Теперь, нам нужно определить расположение наших меток и полей ввода. Для этого, мы будем использовать grid-column с особыми значениями для строк сетки:

Чтобы узнать больше о том как работают строки сетки, посмотрите эти короткие советы:

Советик: задайте название строкам CSS сетки, просто на всякий случай

На основе этих линий сетки мы применим следующие правила для наших меток, полей ввода и кнопок:

Метки окажутся в столбце, который начинается в строке 1 и заканчивается в строке 2. Поля и кнопка будут помещены в столбец, который начинается в строке 2 и заканчивается в строке 3.

Наконец, мы используем grid-gap для добавления интервала в 16px между строками и столбцами:

2. Форма контактов

В этом макете мы хотим добиться следующего:

Высота столбцов должна быть одинаковой, таким образом боковая панель и оболочка формы будут одинаковой высоты.
Мы хотим, в дальнейшем, разделить форму (правую сторону) на два столбца, изменяя на кнопку так, чтобы она заполняла всю ширину.

Такой макет вполне можно построить используя плавающие элементы. Тем не менее, нам нужно задать min-height для левого столбца, иначе он будет на всю высоту. Существуют и другие «традиционные» подходы к этой проблеме, но ни одна из них не настолько хороша.

«Обычный» CSS

Подведём итог, при использовании плавающих элементов нам понадобится:

Добавить min-height к левому столбцу.
Разместить «обёртки» контактов и формы.
Добавить clearfix или overflow: hidden; , для сохранения высоты «обёртки».
Разместить элементы формы и добавить отступы между ними.
Сбросить размещение textarea и кнопки отправки, а затем сделать так, чтобы она размещалась на всю ширину.

Это довольно много работы, верно?

Лучшим подходом для решения этого будет Flexbox либо Grid. В этом конкретном случае, я бы предпочёл использовать сетку Grid, так как мы упорядочили элементы вертикально и горизонтально.

С макетом CSS сетки

Давайте начнём с обозначения сетки на нашу «обёртку» и разделим её на два столбца.

Элемент формы также можно обозначить как сетку:

После применения этих правил, мы получим следующее:

Мы должны позволить двум последним элементам заполнить всю ширину, растянув их от линии сетки 1 до 3.

3. Форма профиля

Пришло время для нашего последнего макета формы. В этом примере, добавим поле, для загрузки изображения профиля. Его нужно разместить сверху справа.

«Обычный» CSS

Мы построим это со следующей разметкой:

Вкратце, охватывая традиционный подход, мы можем выполнить наш макет с помощью следующих шагов:

Добавить position: relative; к элементу формы.
Задать абсолютную позицию для поля загрузки файла направо и вверх.
Добавить отступ для формы такой же ширины, как для поля загрузки файла.
Задать фиксированную ширину для поля загрузки файла.

С макетом CSS сетки

Давайте не будем останавливаться на традиционном подходе слишком много. С сеткой, мы разделим форму на два столбца, вот так:

Первый столбец займёт двойной размер второго столбца по горизонтали, чего мы достигнем используя единицу измерения fr :

Задав сетку, нам нужно разместить элементы формы между строками сетки 1 и 2:

Следующий шаг это размещение поля загрузки во втором столбце. Для этого, мы расположите его между 2 и 3 линиями сетки. Переместив по вертикали, мы сделаем диапазон строк от линии сетки 1 до линии сетки 2.

Заключение

Отлично сработано! Мы рассмотрели несколько различных примеров, использование CSS сетки, для построения веб-форм. Как вы заметили, мы сэкономили много времени и усилий, написав всего несколько строк кода, по сравнению с использованием методик традиционного макета. Вы можете использовать все из выше представленных примеров, благодаря CSS @supports , который помог нам в использовании некоторых функций для улучшения.

Читать:

Как узнать сколько страниц напечатал принтер brother

Советик: Добавляем @supports CSS файл в демо на CodePen

У вас есть предложения по улучшению этих макетов? Сообщите мне об этом в комментариях ниже.

CSS решения. Создание сетки, колонок и гридов.

В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:

old way — старый стиль, работающий во всех популярных браузерах;
new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.

Создание сеток одна из самых частых задач в CSS. Сначала их делали с помощью таблиц, но в дальнейшем появились более гибкие решения.

Классические колонки с использованием float (old way)

Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.

Принцип работы в следующем:

Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты

Создадим следующую HTML структуру со следующими стилями:

Сначала мы объявили константы:

old-columns — количество колонок
old-gutter — расстояние между колонками

Для родителя задали отступы слева и справа, а также добавили clearfix :

Для колонок добавили отступы и базовые стили, общие для всех:

Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.

Саму сетку создали средствами SCSS:

Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:

Откроем в браузере:

Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:

Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.

В результате получим:

На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.

Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.

Преимущества:

Работает во всех популярных браузерах.

Недостатки:

Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.

Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.

Колонки с использованием flex (new way)

Более прогрессивным способ для создания колонок является использование flex .

Принцип работы заключается в следующем:

Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .

Создадим следующую структуру HTML и классы, описанные выше:

Как можно увидеть из реализации, решение почти совпадает с old-way.

Откроем в браузере:

Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:

Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.

Добавим немного контента в колонки, чтобы посмотреть, что будет с высотой колонок:

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

Преимущества:

Работает во всех современных браузерах (IE > 9)
Колонки одинаковой высоты из «коробки»

Недостатки:

Не работает в старых браузерах.

Создание сеток с помощью grid (feature way)

Последним решением является создание сеток средствами W3C — использование display: grid .

Принцип работы в следующем:

Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).

Создадим сетку подобную тем, что приводились в примерах ранее:

Откроем в браузере:

На скриншоте видим, что отрицательных отступов нету и колонки занимают все доступное расстояние.

Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.

Если изменим ширину:

Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.

Преимущества:

Позволяет создавать сетки любой сложности.

Недостатки:

Не работает в старых браузерах;
Требует перестройки мышления по построению и использованию сеток.

Дополнение

Небольшая демонстрация работы всех трёх решений:

Резюме

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

Как сделать кнопки в html в столбик