Почему не отображается правильно кнопка?

Question

Вот пример со стандартной темой.

.hotpink { 
 
    width: 100%; 
 
    height: 100vh; 
 
    
 
    border: 1px solid #999; 
 
} 
 

 
.pink { 
 
    width: 100%; 
 
    height: 100vh; 
 

 
    border: 1px solid #999; 
 
} 
 

 
.deeppink { 
 
    width: 100%; 
 
    height: 100vh; 
 

 
    border: 1px solid #999; 
 
}

<script src="https://code.jquery.com/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 hotpink"> 
 
      <div class="row"> 
 
       <div class="left-side pink col-md-10"></div> 
 
       <div class="right-side deeppink col-md-2"> 
 
        <a href="" class="btn btn-default">отправить</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
    </div> 
 
</div>

продублировать на codepen, где отображается результат по всей ширине дисплея.

И вот пример с тематическим материалом-дизайном.

.hotpink { 
 
    width: 100%; 
 
    height: 100vh; 
 
    
 
    border: 1px solid #999; 
 
} 
 

 
.pink { 
 
    width: 100%; 
 
    height: 100vh; 
 

 
    border: 1px solid #999; 
 
} 
 

 
.deeppink { 
 
    width: 100%; 
 
    height: 100vh; 
 

 
    border: 1px solid #999; 
 
}

<script src="https://code.jquery.com/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.css"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/ripples.js"></script> 
 

 

 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 hotpink"> 
 
      <div class="row"> 
 
       <div class="left-side pink col-md-10"></div> 
 
       <div class="right-side deeppink col-md-2"> 
 
        <a href="" class="btn btn-default">отправить</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
    </div> 
 
</div>

продублировать на codepen. Почему и как это исправить?

Answer 1

Ну, таблицы стилей, которые вы добавили для ripples.css и bootstrap-material-design.css, вызывают нежелательное поведение для вас.

Удаление обеих этих таблиц стилей из второго образца (с вопросом), вы можете видеть, что между предоставленными вами образцами не будет различий.

Проблемы с макетом и стилем могут возникать, когда вы ссылаетесь на разные таблицы стилей.