css - 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 是 bootstrap 提供的类。我实际看到的是 Buttons.Less 提供了一些样式(即灰色按钮背景)。 Buttons.Less 还将 webkit 外观设置为按钮，我认为这会导致移动设备覆盖移动设备默认设置并且不显示样式(如上所示，它忽略了灰色按钮背景)。

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

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

每个人的 fiddle 示例之所以有效，是因为他们使用的是 bootstrap v4，其中包含一个 btn-secondary 类。

Answer 1

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

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

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

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