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;
}

@Academik · 05.03.2021, 17:55

Garry Galler, может так?

HTML5
1
2
3
4
5
6
7
8
<div class="row">
  <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>
</div>

@Garry Galler · 05.03.2021, 18:03 **[ТС]**

А что дает класс row? Я вроде пробовал - ничего не изменилось.
Ну попробую еще раз.

@gogolik · 05.03.2021, 18:06

Garry Galler, посмотрите документацию. Думаю, некоторые вопросы отпадут сами собой.

@Garry Galler · 05.03.2021, 18:10 **[ТС]**

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

Результат.

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

@Garry Galler · 05.03.2021, 18:16 **[ТС]**

Ok. Вот так получилось (надо было только эти area обертывать в row, а не все элементы)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="row">
<div class="col-md-6">
    <textarea class="form-control" id="token-area" required="required"></textarea>
</div>
<div class="col-md-6">
    <textarea class="form-control" id="payload-area"></textarea>
</div>
            
<div>
   <button type="button" class="btn btn-primary" id="button_send">Записать</button>
</div>
</div>

НО стоят они криво. Это как-то исправляется?

@gogolik · 05.03.2021, 18:18

Garry Galler, просто не нужно переопределять бутстраповский container

https://jsfiddle.net/u14ogq0t/

@Garry Galler · 05.03.2021, 18:30 **[ТС]**

Сообщение от gogolik

просто не нужно переопределять бутстраповский container

А если мне нужно, чтобы была видимая подложка и прочие настройки?

Попробовал убрать из style.css container - все равно криво стоят.

@NTHing · 05.03.2021, 18:36

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

НО стоят они криво. Это как-то исправляется?

На скриншоте есть кнопка Submit, а в коде, который вы даёте этой кнопки нет. Мешает она. Как исправить? Дайте больше кода.

@Garry Galler · 05.03.2021, 18:39 **[ТС]**

Кнопка внутри form. Стиль у нее нигде не переопределяется, то есть чисто бутстраповский.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
               
<form id="jwt" name="jwt" action="#">
 
...другие такие же div...
 
 
<div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">Max Chars</span>
                    </div>
                    <input type="text" name="Max" id="max" class="form-control" placeholder="Max Chars" aria-label="Max Chars" aria-describedby="basic-addon1">
                </div>
                
                <input class="btn btn-primary" type="submit" value="Submit">
</form>
 
здесь уже textarea внутри <div class="row">

@gogolik · 05.03.2021, 18:48

Garry Galler, задать другой класс.

HTML5
1
<div class="container otherclass">

CSS
1
.container.otherclass { /*do things */ }

Только не переопределяйте стандартные свойства без крайней необходимости.

@Garry Galler · 05.03.2021, 18:49 **[ТС]**

Нашел в чем косяк. Одному textarea были заданы марджины.
margin-top: 20px;
margin-bottom: 20px;

Убрал их. Теперь стоят ровно, но прижаты верхним краем к кнопке. Блин... верстка это ад...

@NTHing · 05.03.2021, 18:52

Вёрстка это круто! ))

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">           
    <form id="jwt" name="jwt" action="#">
...другие такие же div...
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">Max Chars</span>
            </div>
            <input type="text" name="Max" id="max" class="form-control" placeholder="Max Chars" aria-label="Max Chars" aria-describedby="basic-addon1">
        </div>    
        <input class="btn btn-primary" type="submit" value="Submit">
    </form>
    <div class="row mt-3">
        <div class="col-md-6">
            <textarea class="form-control" id="token-area" required="required"></textarea>
        </div>
        <div class="col-md-6">
            <textarea class="form-control" id="payload-area"></textarea>
        </div>
                    
        <div>
           <button type="button" class="btn btn-primary" id="button_send">Записать</button>
        </div>
    </div>
</div>

@Garry Galler · 05.03.2021, 18:59 **[ТС]**

Сообщение от NTHing

Вёрстка это круто! ))

Для тех, кто любит это дело. Я - нет.
Но ваш вариант работает. Спасибо.
Но еще бы самую нижнюю кнопощку отодвинуть от этих textarea, чтобы не прижималсь верхним краем.
Марджины им задать или опять у bootsrap стиль свой есть?

@NTHing · 05.03.2021, 19:06

У них свои классы для марджинов... Enjoy! ))

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">           
    <form id="jwt" name="jwt" action="#">
...другие такие же div...
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">Max Chars</span>
            </div>
            <input type="text" name="Max" id="max" class="form-control" placeholder="Max Chars" aria-label="Max Chars" aria-describedby="basic-addon1">
        </div>    
        <input class="btn btn-primary" type="submit" value="Submit">
    </form>
    <div class="row mt-3">
        <div class="col-md-6">
            <textarea class="form-control" id="token-area" required="required"></textarea>
        </div>
        <div class="col-md-6">
            <textarea class="form-control" id="payload-area"></textarea>
        </div>
                    
        <div>
           <button type="button" class="btn btn-primary mt-3" id="button_send">Записать</button>
        </div>
    </div>
</div>

@Garry Galler · 05.03.2021, 19:09 **[ТС]**

Уже лучше :-)

Сейчас вот так:

Хотелось бы чтобы были отступы как у кнопки sumbit .
И маленький нюанс: textarea можно задать начальную высоту? Чтобы была побольше, чем сейчас, но при этом можно было как и раньше растягивать за край (сейчас растягивание работает)?

@NTHing · 05.03.2021, 19:20

Код и скриншот...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">           
    <form id="jwt" name="jwt" action="#">
...другие такие же div...
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">Max Chars</span>
            </div>
            <input type="text" name="Max" id="max" class="form-control" placeholder="Max Chars" aria-label="Max Chars" aria-describedby="basic-addon1">
        </div>    
        <input class="btn btn-primary" type="submit" value="Submit">
    </form>
    <div class="row mt-3">
        <div class="col-md-6">
            <textarea class="form-control" id="token-area" rows="10" required="required"></textarea>
        </div>
        <div class="col-md-6">
            <textarea class="form-control" id="payload-area" rows="10"></textarea>
        </div>
                    
        <div>
           <button type="button" class="btn btn-primary mt-3" id="button_send">Записать</button>
        </div>
    </div>
</div>

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

NTHing,
Ну у меня же свой контейнер. В нем так не получается.
Или делать свой контейнер в bootstrap контейнере? Или наоборот?

А начальную высоту удалось задать только через style в теге: style="height: 200px"

@NTHing · 05.03.2021, 21:05

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

Ну у меня же свой контейнер. В нем так не получается.
Или делать свой контейнер в bootstrap контейнере? Или наоборот?

Без кода тяжело что-то говорить... Киньте кусок кода и скажите, что нужно сделать...

@Garry Galler · 05.03.2021, 21:47 **[ТС]**

NTHing,
У меня все в этом контейнере:

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;
}

Сейчас у меня в самом внизу две кнопки. Кнопку "Записать" мне удалось выравнять через класс text-left.
А вот когда я добавил еще одну кнопку и захотел ее прижать к правому краю - получилось опять не так как хотелось.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<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="text-left">
    <button type="button" class="btn btn-primary mt-3" id="button_write">Записать</button>
</div>   
<div class="text-right">
     <button type="button" class="btn btn-danger mt-3" id="button_delete">Удалить</button>
</div>

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@Garry Galler 5438 / 3859 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 18:03 [ТС]
	А что дает класс row? Я вроде пробовал - ничего не изменилось. Ну попробую еще раз. 0

@gogolik Супер-модератор 3951 / 2060 / 829 Регистрация: 13.03.2010 Сообщений: 6,777
	05.03.2021, 18:06
	Garry Galler, посмотрите документацию. Думаю, некоторые вопросы отпадут сами собой. 1

@Garry Galler 5438 / 3859 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 18:10 [ТС]
	Я смотрел. Классы взяты не с потолка, а из документации. Результат. 0

@gogolik Супер-модератор 3951 / 2060 / 829 Регистрация: 13.03.2010 Сообщений: 6,777
	05.03.2021, 18:18
	Garry Galler, просто не нужно переопределять бутстраповский container https://jsfiddle.net/u14ogq0t/ 0

@Garry Galler 5438 / 3859 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 18:49 [ТС]
	Нашел в чем косяк. Одному textarea были заданы марджины. margin-top: 20px; margin-bottom: 20px; Убрал их. Теперь стоят ровно, но прижаты верхним краем к кнопке. Блин... верстка это ад... 0

@Garry Galler 5438 / 3859 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 19:09 [ТС]
	Уже лучше :-) Сейчас вот так: Хотелось бы чтобы были отступы как у кнопки sumbit . И маленький нюанс: textarea можно задать начальную высоту? Чтобы была побольше, чем сейчас, но при этом можно было как и раньше растягивать за край (сейчас растягивание работает)? 0

@Garry Galler 5438 / 3859 / 1215 Регистрация: 28.10.2013 Сообщений: 9,552 Записей в блоге: 1
	05.03.2021, 20:20 [ТС]
	NTHing, Ну у меня же свой контейнер. В нем так не получается. Или делать свой контейнер в bootstrap контейнере? Или наоборот? А начальную высоту удалось задать только через style в теге: style="height: 200px" 0