Продолжение проекта, над которым я работал на прошлой неделе. Это для курса, поэтому мы должны разместить его вдоль линий в качестве руководства (следовательно, используя Bootstap в основном). Далее мы добавим REACT, поэтому мне пришлось перенести его в сторону BS4 (я использовал cdd grid на одном этапе - это была действительно полезная кривая обучения, поэтому я сохранил этот метод для будущих проектов), иначе я закончукогда мы переходим к следующему этапу.
Это выглядит довольно хорошо для меня сейчас, но далеко не идеально. Я изо всех сил пытался разместить текст по центру в элементах (белые текстовые поля, как вы увидите на изображении) - они всплывают наверх. Я пробовал различные методы выравнивания / центр безрезультатно. Кнопка № 3 в поле «Выдающиеся задачи» подталкивает границу, а не выравнивается по центру по вертикали.
Пример кода раздела (я добавил текстовый центр, но он не работает - также добавил .centerполе wirth class: auto, которое тоже не работало).
Также (и не уверен, что это можно изменить), когда кнопки «Завершить» и «Удалить» «сжимаются» в режиме ответа (вплоть до мобильного), я могу »Похоже, что они выровнены по центру под соответствующими текстовыми полями ... не так уж и сложно, но я думаю, было бы полезно узнать на этом этапе.
Я связал кодовое перо, хотя кажется, чтоотсутствует какой-то CSS (например, цвета кнопок и фон?).
Большое спасибо.
Codepen
<div class="row ToDoRow top-buffer">
<div class="col-12 col-md-6 text-center">
<div class="input">
<h3>Book Flights</h3>
</div>
</div>
<div class="btn-toolbar text-center well">
<div class="col-6 col-md-3 buttonPad">
<button type="button" class="btn my-primary my-small-btn btn btn-sm" ">COMPLETE</button>
</div>
</div>
<div class=" col-6 col-md-3 buttonPad">
<button type="button" class="btn my-primary2 btn-sm my-small-btn" ">DELETE</button>
</div>
</div>