Bootstrap 4. Расположить два textarea рядом по горизонтали

@Garry Galler · Регистрация: 28.10.2013

Студворк — интернет-сервис помощи студентам

Как в bootstrap расположить два textarea рядом по горизонтали?
Установка класса col-md-6 не помогает почему-то...

HTML5
1
2
3
4
5
6
<div class="col-md-6">
<textarea class="form-control" id="token-area" ></textarea>
</div>
<div class="col-md-6">
<textarea class="form-control" id="payload-area" ></textarea>
</div>

Поля ввода друг под другом появляются, но с 1/2 размера от ширины контейнера, что уже радует.

Вот стиль контейнера в котором они сидят:

CSS
1
2
3
4
5
6
7
8
9
div.container  {
            display: flex;
            flex-direction: column;
            max-width: 1000px;
            min-height: 100%;
            margin: 0 auto;
            background: #F5F7FA;
            font: 14px/20px Arial, sans-serif;
}

@NTHing · 05.03.2021, 22:05

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
    <div class="row mt-3">
        <div class="col-md-6">
            <textarea style="height: 200px" class="form-control" id="token-area" required="required"></textarea>
        </div>        
        <div class="col-md-6">
            <textarea style="height: 200px" class="form-control" id="payload-area"></textarea>
        </div>
    </div>
    <div class="d-flex justify-content-between">
        <button type="button" class="btn btn-primary mt-3" id="button_write">Записать</button>
        <button type="button" class="btn btn-danger mt-3" id="button_delete">Удалить</button>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
div.container  {
            display: flex;
            flex-direction: column;
            max-width: 1000px;
            min-height: 100%;
            margin: 0 auto;
            background: #F5F7FA;
            font: 14px/20px Arial, sans-serif;
}

@Garry Galler · 05.03.2021, 22:20 **[ТС]**

NTHing,
Почти тоже самое, что я уже нашел :-)
Только у вас это встроенные в bootstrap классы d-flex justify-content-between.
Надо будет их запомнить.

@NTHing · 05.03.2021, 22:26

Сообщение от Garry Galler

Надо будет их запомнить.

Не грузите в свою память объекты... Запоминайте лучше ссылки на них..))

Новые блоги и статьи Все статьи Все блоги /
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .

@Garry Galler 5439 / 3860 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 22:20 [ТС]
	NTHing, Почти тоже самое, что я уже нашел :-) Только у вас это встроенные в bootstrap классы d-flex justify-content-between. Надо будет их запомнить. 1

Bootstrap 4. Расположить два textarea рядом по горизонтали

Решение