Получить форматирование для окна параметров с помощью CSS и Bootstrap 4

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

Я пытаюсь создать заголовок для каждого раздела параметров слева («Проверить функции» и «Печатать флаги»), а затем расположить параметры по центру в поле справа.

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

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">


<div class = "row">
        <div class = "col" style = "text-align: center;">
            <div class = "col" style = "position: relative; text-align: center; border-style: solid; border-width: thin">
                <div style = "width: 120px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); padding: 5px; background-color:cadetblue; font-weight: bold;">
                    Check Functions
                </div>
                <label class = "text-right">Check number :</label>
                <kendo-numerictextbox name = "currency" id = "txtCheckNumber" format = "#" min = "0" enable = "true" max = "9999999999" spinners = "false" value = "10001"> </kendo-numerictextbox>
                <kendo-datepicker name = "monthpicker" start = "CalendarView.Month" depth = "CalendarView.Month" format = "MM/dd/yyyy" value = "DateTime.Now"> </kendo-datepicker>
                <kendo-button name = "assignCheckNumbers" type = "button" onclick = "LoopGrid()">Assign Check Numbers </kendo-button>
            </div>
            <div class = "col" style = "position: relative; text-align: center; border-style: solid; border-width: thin">
                <div style = "width: 120px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); padding: 5px; background-color:cadetblue; font-weight: bold;">
                    Print Flags
                </div>
                <kendo-button name = "printTrue" type = "button" onclick = "FlipAllPrintFlags(1)">All Print To True</kendo-button>
                <kendo-button name = "printFalse" type = "button" onclick = "FlipAllPrintFlags(2)"> All Print To False</kendo-button>
            </div>
        </div>
    </div>

css bootstrap-4

30.12.2018 20:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Я думаю, вам нужно больше конвертов столбцов строк - вам нужно две строки и два столбца

        <div class = "row">
            <div class = "col-2 border" style = "background-color:cadetblue; font-weight: bold;">
                Check Functions
            </div>

            <div class = "col-10 border text-center">
                <label class = "text-right">Check number :</label>
                <kendo-numerictextbox name = "currency" id = "txtCheckNumber" format = "#" min = "0" enable = "true" max = "9999999999" spinners = "false" value = "10001"> </kendo-numerictextbox>
                <kendo-datepicker name = "monthpicker" start = "CalendarView.Month" depth = "CalendarView.Month" format = "MM/dd/yyyy" value = "DateTime.Now"> </kendo-datepicker>
                <kendo-button name = "assignCheckNumbers" type = "button" onclick = "LoopGrid()">Assign Check Numbers </kendo-button>

            </div>

        </div>

        <div class = "row">
            <div class = "col-2 border" style = "background-color:cadetblue; font-weight: bold;">
                Print Flags
            </div>

            <div class = "col-10 text-center border">
                <kendo-button name = "printTrue" type = "button" onclick = "FlipAllPrintFlags(1)">All Print To True</kendo-button>
                <kendo-button name = "printFalse" type = "button" onclick = "FlipAllPrintFlags(2)"> All Print To False</kendo-button>

            </div>

        </div>

спасибо ... это всегда просто вещи, которые съедают время!

— 30.12.2018 21:46

30.12.2018 21:08