html - Bootstrap 标题不能始终在我的模式窗口上工作......想法？

Question

我的网站上有一个 Bootstrap 模式窗口，我似乎无法获得一致的样式。

这是我的第一个模态框的样子(以及我想要的样式):

这是第二个模态窗口和样式:

这是设置标题和结束样式的 css:

.modal-title {
    margin: 10px !important;
}
.close {
    opacity: 1 !important;
    position: relative !important;
    padding-right: 15px !important;
    top: 7px !important;
    left: 3px !important;
}

这是模态窗口相关 html 的副本:

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button  type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        ...             
      </div>
</div>

</div>
</div>



<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
<div class="modal-content">
    <div classs="modal-header">
        <button  type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
        <br>
        <h4 class="modal-title">Send Me a Note</h4>
    </div>
     <div class="modal-body">
<form id="contact-send" method="post" action="">
...
        </form>
      </div>
</div>

</div>
</div>

调用模态的html:

<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">Movie</a>

和

<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>

编辑 1:没有父 div。我按照建议做了并删除了 !important 元素。我在第二个模态窗口中有一个表单，在第一个窗口中有一个 iframe，也许这与这些规则设置的边距有关......现在正在研究。无论如何，这就是表单现在的样子:

和:

编辑2:

再修改一下我的代码，我发现如果我删除 modal-header 类并将元素放入 modal-content 中，它似乎可以工作.如果我发现任何其他问题，我会发布最终编辑。

Answer 1

这是一个您可能忽略的简单语法错误。

1. .modal-header里面#contactUS不起作用，因为类属性写为 classs .只需删除多余的字母即可。

2. 你有一个 <br> h4 之前的标签我假设您将其添加为尝试解决问题。它不需要，因此您可以将其删除。

正确的代码应该是这样的:

.modal-title {
  margin: 10px !important;
}

.close {
  opacity: 1 !important;
  position: relative !important;
  padding-right: 15px !important;
  top: 7px !important;
  left: 3px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">Movie</a>

<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
        <h4 class="modal-title">They Live (1988)</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>

  </div>
</div>


<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- was classs -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
        <!-- <br> -->
        <h4 class="modal-title">Send Me a Note</h4>
      </div>
      <div class="modal-body">
        <form id="contact-send" method="post" action="">
          ...
        </form>
      </div>
    </div>

  </div>
</div>

jsFiddle:https://jsfiddle.net/azizn/j1sb9gz3/