正如你在图像中看到的,我希望我的模态的左半部分是一种颜色,右边的颜色是不同的颜色。 我正在把两个col-md-6分开一半,然后在它们上面添加一个id和bg颜色通过id上的css,但它看起来很弯曲。
<div class="modal hide-fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div> -->
<div class="modal-body">
<div class="col-md-6" id="levo">
<div class="large-title">
sample text
</div>
<div class="large-text">
sample text.
</div>
<div class="regular-text">
sample textsample textsample textsample textsample textsample text!
</div>
</div>
<div class="col-md-6 right-col">
{{ form.input('sender_name', id='field-name', label=_(''), placeholder=_('eg. '), value='', error='', classes=['control-full'], is_required=true,attrs={'required': 'required', 'class': 'form-element'}) }} {{ form.input('email_address', id='field-email',
label=_(''), placeholder=_(''), value='', error='', classes=['control-full'], is_required=true,attrs={'required': 'required', 'class': 'form-element'}) }}
<div class="">
sample textsample textsample textsample text?*<br> sample textsample textsample textsample text:
</div>
{{ form.textarea('message_content', id='field-comments', placeholder=_('eg. '), value='', error='',is_required=true, attrs={'required': 'required', 'class': 'form-element'} ) }}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<style>
.modal-content {
background-color: red;
}
.right-col {
background-color: white;
}
</style>
我应该继续这种方法(我确定这是一个css修复)还是我需要一种不同的方法?
答案 0 :(得分:0)
试一试。必要时覆盖引导样式。
.modal {
display: block;
}
.modal-content {
}
.modal-dialog .modal-body {
padding-top: 0;
}
#levo {
background-color: red;
}
#levo, .right-col {
padding-top: 15px;
}