如何防止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%; 
}