模态背景分为两部分

时间:2017-04-24 17:06:59

标签: html css twitter-bootstrap bootstrap-modal

http://prntscr.com/f0azmh

正如你在图像中看到的,我希望我的模态的左半部分是一种颜色,右边的颜色是不同的颜色。 我正在把两个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">&times;</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修复)还是我需要一种不同的方法?

1 个答案:

答案 0 :(得分:0)

试一试。必要时覆盖引导样式。

.modal {
   display: block;
}

.modal-content {

 }
.modal-dialog .modal-body {
  padding-top: 0;
}
#levo {
  background-color: red;
}
#levo, .right-col {
  padding-top: 15px;
}