Bootstrap Btn类在移动设备上不起作用

Question

由于某种原因，我无法移动以停止应用其默认样式并尊重bootstrap css（v3.4.1）。以下是我的html：

 <div class="buttons col-xs-4">
        <div id="btnvote1" class="btn-wrap row-md-4 mtop10 mbottom10">
            <button class="btn-vote btn btn-secondary" onclick="vote(1)">Opt 1</button>
        </div>
        <div id="btnvote2" class="btn-wrap row-md-4 mbottom10">
            <button class="btn-vote btn btn-primary" onclick="vote(2)">Opt 2</button>
        </div>
        <div id="btnvote3" class="btn-wrap row-md-4 mbottom10">
            <button class="btn-vote btn btn-secondary" onclick="vote(3)">Opt 3</button>
        </div>
        <div id="btnvote4" class="btn-wrap row-md-4 mbottom10">
            <button class="btn-vote btn btn-secondary" onclick="vote(4)">Opt 4</button>
        </div>
    </div>

我的BundleConfig在_Layout.cshtml中呈现

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css"));
        }

在PC上的Chrome浏览器中的外观：

在Chrome中的两个不同世代iPhone（5s，6）上的外观：

互联网不断告诉我应该可以工作，但我没有运气：

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

任何建议表示赞赏

编辑：

解决方案

问题似乎是假设btn-secondary是引导程序提供的类。我实际上看到的是Buttons.Less提供了一些样式（即灰色按钮背景）。 Buttons.Less还将webkit外观设置为button，我认为这导致mobile覆盖为mobile default并且不显示样式（如上所示，它忽略了灰色的按钮背景）。

如果我使用Bootstrap v3 btn类之一，它将在移动设备上产生所需的结果

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

每个人的小提琴示例之所以起作用，是因为它们使用的是bootstrap v4，其中包括btn-secondary类。

Answer 1

实际上，您的代码和期望中有几个错误

1. .btn-secondary类不在Bootstrap 3中，您需要为此使用Bootstrap v4
2. 您提到的按钮样式是.btn-primary类而不是.btn-secondary类。

因此，将.btn-Secondary类替换为.btn-primary类， 那么这段代码就可以正常工作。

button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}