我已经在我的项目中导入了leaflet-bootstrapmodal.js，但是看起来好像我不能样式化它，请参阅下面的插件：
<!-- Bootstrap modal-->
<link rel="stylesheet" href="bootstrap-modal/bootstrap-modal/leaflet-bootstrapmodal.css">
<!--My plugin -->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav class="navbar">
<img src="globeBig.png" class="logo"/>
<h1 class="title">The Gazetteer</h1>
<ul class="list">
<!-- Button trigger modal
<li>
<button type="button" id="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal" disabled>
Show weather forecast for:
</button>
</li> -->
<li class="selector">
<select class="country">
<option class="optionResult">Select a country</option>
</select>
</li>
</ul>
</nav>
<div class="container">
<!-- Modal weather -->
<div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLabel"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal info -->
<div class="modal fade" id="Info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="infoModalLabel"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-info">
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Additional html.....
In style.css:
/* not workng below:*/
.modal-content{
background-color: red;
}我不明白为什么通过在HTML中添加类，我不能自定义模态，因为应用了相同的类名，我相信我的样式插件必须在模态包导入之后。
1条答案
按热度按时间yqhsw0fo1#
CSS中的
!important规则用于为属性/值添加比正常更重要的内容。事实上，如果你使用
!important规则，它将覆盖所有以前的样式规则，为该特定属性的元素！-更多信息here。