为什么没有正确显示按钮？

Question

以下是标准主题的示例。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在codepen上复制，其结果显示在整个显示宽度上。

以下是主题材料设计的一个例子。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在codepen上重复。为什么以及如何解决它？

Answer 1

您为ripples.css和bootstrap-material-design.css添加的样式表是否会导致不必要的行为。

从第二个样本（有问题的样本）中删除这两个样式表，您可以看到您提供的样本之间没有差异。

当您引用不同的样式表时，可能会出现布局和样式问题。