Я использую модальности начальной загрузки 3, дизайн, который меня попросили сделать, -
Обратите внимание, как графический дизайнер разместил кнопкувыровнено по вертикали с началом текста, а другое по вертикали с концом текста.
Мой код:
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
<?php echo $question_title; ?>
</div>
<div class="row">
<?php echo $you_know; ?>
</div>
<div class="row">
<?php echo $migrant; ?>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
<?php echo $yes; ?>
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
<?php echo $no; ?>
</button>
</div>
</div>
Я получаю то, что хочу, но не то выравнивание, которое мне нужно, еслиЯ добавляю несколько полей, они будут разбиты на другом экране, как лучше это решить?
Обратите внимание, что я попытался вставить весь свой код в виде фрагмента, и это сделало больше беспорядка, чем реальная сделка, не используйте этот фрагмент в качестве ссылки, мой код в браузере намного лучше, и я неЯ не беспокоюсь о моих уроках, они кажутся много, но все они бесполезны, они не более чем неудачная попытка выравнивания.
Тот, у которого нет фрагмента, такой же, но его легче читать.
$(window).on('load', function () {
$('#francepopup').modal('show');
});
.fr-title-popup-margin {
margin-top: 20px;
}
.fr-popup-title {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
text-align: center;
}
.modal-fr-btn {
border-radius: 40px;
height: 25px;
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
}
.dont {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 6px;
}
.fr-flags {
margin: 0 auto;
}
.fr-text {
margin: 0 auto 0 3px
}
@media (min-width: 992px) {
.modal-dialog {
width: 30%;
}
}
@media (max-width: 991px) {
.pr {
float: right;
}
.pl {
float: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
Are you or is someone
</div>
<div class="row">
you know
</div>
<div class="row">
a migrant in France?
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
Yes
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>