Question

我是css + html的新手，我一直坚持一个简单的问题。所以我从bootstrap得到了一个弹出窗口，代码是

     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Contact Us</h4>
      </div>
      <div class="modal-body">
        <p>Contact us at _____</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

我想知道如何更改按钮的填充以及文本的颜色。我尝试使用#myModal作为css标签，如图所示

  #myModal{
    background-color: green;
    padding-left:40%;
}

我做错了什么？

Answer 1

要更改填充和颜色，您可以执行此操作。

添加CSS

.btn btn-info btn-lg{
   color: green;
   padding-left: 30px;
 }

Answer 2

您可能尝试更改模式之外的按钮，以便使用简单的.btn选择器，因此无需选择#myModal。

在要覆盖的属性的引导声明之后，必须包含自定义样式表;

.btn {
  color:green;
  padding-left: 50px;
}

Example我在这里添加了一些填充和自定义颜色，以便您了解其工作原理。

Answer 3

或者您可以在：

中使用内联CSS

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>

像：

"<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="color :orange; padding-left:30x;">Contact Us!</button>"

这对我有所帮助。谢谢..

编辑弹出窗口按钮

3 个答案: