html - 如何防止 Bootstrap 按钮从其他类继承？

Question

我有一个类容器，其中包含带按钮的幻灯片。该按钮位于幻灯片上，并随着网页的响应而改变其大小。在幻灯片的正下方，我想再居中放置三个按钮。但无论我做什么，按钮都会相互继承 CSS，这导致我的幻灯片按钮不再响应。当我缩小屏幕时，按钮不断移动到屏幕底部，与我新创建的三个按钮重叠。我该如何解决这个问题？如何防止我的按钮继承彼此的类？

HTML:

<div class="container">
        <button type="button" class="btn btn-default btn-lg active"><span   style="color:#FFFFFF">Button Text</span></button>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/sample1.jpg" alt="Sample Image" />
                <img src="images/sample2.jpg" alt="Sample Image"/>
                <img src="images/sample3.jpg" alt="Sample Image"/>
            </div>
        </div>
    <div class="center-buttons">
        <div class="col-md-3 " style="min-height: 200px; background-color: red;">
            <button type="button" class="btn btn-security">Button Text</button>
        </div>
        <div class="col-md-3 " style="min-height: 200px; background-color: yellow;">
            <button type="button" class=" btn btn-package">Button Text</button>
        </div>
        <div class="col-md-3 " style="min-height: 200px; background-color: blue;">
            <button type="button" class=" btn btn-signup">Button Text</button>
        </div>
    </div>
   </div>

CSS:

 .container{
 width:100%;
 position:relative;
 padding-right:0;
 padding-left:0;
 }
.btn{
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:20px;
 text-align:center;
 }
 @media (max-width: 600px){
 .btn{
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:20px;
 text-align:center;
 }
 }
 @media (max-width: 500px){
 .btn {
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:10px;
 text-align:center;
 }
 }
 .slider-wrapper.theme-default{
 max-height:500px;
 overflow:hidden;
 }
 .nivoSlider{
 position:relative;
 }
 .nivoSlider img{
 position:absolute;
 top:0px;
 left:0px;
 display:none;
 }
 .nivoSlider a{
 border:0;
 display:block;
 }
 .center-buttons{
 margin:0 auto 0;
 }
 .btn-security{
 background-color:#FFFFFF;
 border-color:#1B75BB;
 color:#1B75BB;
 }
 .btn-package{
 background-color:#FFFFFF;
 border-color:#1B75BB;
 color:#1B75BB;}
.btn-signup{
 background-color:#FFFFFF;
 border-color:#F90B0B;
 color:#F90B0B;
 }

Answer 1

您是否尝试过为按钮指定自己的类名来添加样式，而不是使用 .btn 类？

<button type="button" class="my-button btn btn-default btn-lg active">Button</button>

然后在 my-button 而不是 btn 上调用你的 css。

.my-button{
    position:absolute;
    z-index:900;
    bottom:45%;
    right:25%;
}