получить форматирование для поля параметров, используя CSS и Bootstrap 4

Question

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

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

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

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

Answer 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>