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

Question

出于某种原因，我无法让移动设备停止应用其默认样式并尊重引导 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 外观设置为按钮，我认为这会导致移动设备覆盖为移动设备默认值并且不显示样式（如上所示，它忽略了灰色按钮背景）。

如果我使用 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;
}