引导SB管理2:按钮文本对齐在Chrome中不起作用

Question

我在一个应用程序中使用some 2主题的引导框架，有一些按钮，例如：

<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>

这就是如何用正确的文本对齐(对不起，我还不能发布图片)来显示它们(实际上在Firefox中)：http://i123.photobucket.com/albums/o308/spinfun/firefox2.jpg

这就是Chrome显示的内容：http://i123.photobucket.com/albums/o308/spinfun/chrome2.jpg

所以我的问题是:如何让Chrome显示那些以水平为中心的文本按钮？

编辑:我已经设置了一个真正的基本页面，只有这3个按钮。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- custom CSS SB Admin-->
        <link rel="stylesheet" href="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css">
    </head>

    <body>
        <button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
        <button class="btn btn-primary btn-circle btn-xl">Kl S</button>
        <button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>

        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!-- SB Admin Theme -->
        <script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
    </body>
</html>

在我使用的每台计算机上，按钮文本都没有水平地以Chrome为中心显示。

没有SB管理css，对齐是正确的，但按钮当然不是圆形的。所以问题一定是在管理部门的某个地方。

Answer 1

您需要将该类重写到自定义的CSS文件中。

CSS

.btn-circle.btn-xl {
    padding: 10px 0;
}

SbAdminv2.0主题有一些预定义的CSS，这导致了这个问题。

下面的类将padding: 10px 16px;放到它的sb 2.css文件中

.btn-circle.btn-xl {
    padding: 10px 16px;
}