Bootstrap 4 ряда столбцов с кнопками

Я начал изучать Bootstrap 4 и HTML5 / CSS в целом. Я хочу создать текстовую область с двумя кнопками сбоку (по центру друг относительно друга):

Я получил следующий код:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<div class = "container mt-2">
  <div class = "row">
    <div class = "col-10">
      <textarea class = "form-control" rows = "3" id = "sent_text" placeholder = "Just write some text.."></textarea>
    </div>
    <div class = "col-2">
      <div class = "row">
        <button class = "btn btn-success btn-sm m-1" type = "button">Send</button>
      </div>
      <div class = "row">
        <button class = "btn btn-info btn-sm m-1" type = "button">Clear</button>
      </div>
    </div>
  </div>
</div>

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

Спасибо

Контент не следует размещать непосредственно в .row. .row используется только для хранения столбцов.

— 11.07.2018 12:51

html twitter-bootstrap bootstrap-4

11.07.2018 12:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

5 309

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Лучше сделать это с justify-content-around d-flex flex-column в столбце кнопок. Не было необходимости в дополнительном элементе row в div col-2.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class = "container mt-2">
  <div class = "row">
    <div class = "col-10">
      <textarea class = "form-control" rows = "3" id = "sent_text" placeholder = "Just write some text.."></textarea>
    </div>
    <div class = "col-2 justify-content-around d-flex flex-column">
      <div>
        <button class = "btn btn-success btn-sm" type = "button">Send</button>
      </div>
      <div>
        <button class = "btn btn-info btn-sm" type = "button">Clear</button>
      </div>
    </div>
  </div>

11.07.2018 12:25

Вы должны поместить каждую кнопку в div с классом col -....

Документация Bootstrap о вложении элементов в ряд

Codepen с вашим примером, чтобы показать вам разницу, когда вы используете класс col -....

Codepen

<div class = "container mt-2">
<div class = "row">
    <div class = "col-10">
    <textarea class = "form-control" rows = "3" id = "sent_text"
              placeholder = "Just write some text.."></textarea>
    </div>
    <div class = "col-2">
        <div class = "row">
             <button class = "btn btn-info btn-sm m-1" type = "button">Clear</button>
        </div>
        <div class = "row">
          <div class = "col-12">
            <button class = "btn btn-success btn-sm m-1" type = "button">Send in col</button>
          </div>
        </div>          
        <div class = "row">
          <div class = "offset-6 col-6">
            <button class = "btn btn-success btn-sm m-1" type = "button">Send centered using col</button>
          </div>
        </div>
  </div>

11.07.2018 12:40

Я думаю, что этот метод намного лучше. (:

Используйте col для столбца textarea, чтобы он занимал все доступное пространство.
Используйте col-auto для столбца кнопок, чтобы он занимал столько места, сколько нужно. А затем используйте d-flex flex-column, чтобы изменить его направление.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<div class = "container mt-2">
  <div class = "row">
    <div class = "col">
      <textarea class = "form-control" rows = "3" id = "sent_text" placeholder = "Just write some text.."></textarea>
    </div>
    <div class = "col-auto d-flex flex-column">
      <button class = "btn btn-success btn-sm m-1" type = "button">Send</button>
      <button class = "btn btn-info btn-sm m-1" type = "button">Clear</button>
    </div>
  </div>
</div>

11.07.2018 13:10

Также хорошо сделать textarea non-reziable. Попробуй это

textarea.form-control{
  resize: none;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<div class = "container mt-2">
  <div class = "row">
    <div class = "col-10">
      <textarea class = "form-control" rows = "3" id = "sent_text" placeholder = "Just write some text.."></textarea>
    </div>
    <div class = "col-2">
      <div class = "row">
      <div class = "d-flex flex-column">
         <button class = "btn btn-success btn-sm m-1" type = "button">Send</button>
          <button class = "btn btn-info btn-sm m-1" type = "button">Clear</button>
       </div>
      </div>
    </div>
  </div>
</div>

11.07.2018 14:36