Вопросы Теги

Bootstrap 4 Grid System, я не могу достичь этого макета

Для Java-кода создайте класс POJO для вашего объекта вместо JSONObject. и используйте JSONEncapsulator для вашего класса POJO. таким образом, порядок элементов зависит от порядка геттер-сеттеров в вашем классе POJO. например. Класс POJO будет как 

Class myObj{
String userID;
String amount;
String success;
// getter setters in any order that you want

, и вам нужно отправить свой json-объект в ответ 

JSONContentEncapsulator<myObj> JSONObject = new JSONEncapsulator<myObj>("myObject");
JSONObject.setObject(myObj);
return Response.status(Status.OK).entity(JSONObject).build();

. Ответ этой строки будет

{myObject: {// атрибуты упорядочиваются так же, как и порядок настройки получателя.}}

0
задан Thanveer Shah 17 January 2019 в 07:10
поделиться

2 ответа

Попробуйте это с Bootstrap 4 

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>

        <div class="col-md-6">
            <div class="row h-100">
                <div class="col-12 h-50" style="padding-bottom: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>

                <div class="col-12 h-50" style="padding-top: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>
            </div>        
        </div>

        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>
    </div>
</div>

Вы можете изменить padding на внутренних столбцах. Не забудьте поместить row в container или container-fluid, как описано здесь https://getbootstrap.com/docs/4.2/layout/grid/

[ 118] Контейнеры предоставляют средства для центрирования и горизонтального заполнения содержимого вашего сайта. Используйте .container для чувствительной ширины пикселя или .container-liquid для ширины: 100% для всех размеров окна просмотра и устройства.

0
ответ дан Αntonis Papadakis 17 January 2019 в 07:10
поделиться

Пожалуйста, проверьте, что рабочий фрагмент поможет вам 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
    <div class="row" style="position:relative;height:500px;">
        <div class="col-sm-12 bg-primary" style="height:200px">d</div>
        <div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
    </div>
</div>        
<div class="col-sm-4 bg-info" style="height:500px">z</div>

</div>

0
ответ дан Sethuraman 17 January 2019 в 07:10
поделиться
Другие вопросы по тегам:

Похожие вопросы: