Question

如何更改以下按钮才能在手机上正确显示？

HTML

<div class="container-fluid bg-1 text-center">
    <div class="row text-center" style="display:inline">
        <div class="col-lg-12">
            <div class="col-lg-4" style="float:right;">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">QUESTIONS AND ANSWERS</a>
            </div>
            <div class="col-lg-4">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">REGISTER</a>
            </div>
            <div class="col-lg-4">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">CONTACT</a>
            </div>
        </div>
    </div>          
</div>

CSS

.btn {
    letter-spacing: 1px;
    text-decoration: none;
    background: none;
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
    font-size:14px;
    line-height:20px;
    font-weight:700;
    text-transform:uppercase;
    border: 3px solid;
    padding:8px 20px;

    margin-top:10px;}

.btn-outlined {
    border-radius: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
            transition: all 0.3s;}

.btn-outlined.btn-white {
    background: none;
    color: #FFFFFF;
    border-color: #FFFFFF;}

.btn-outlined.btn-white:hover,
.btn-outlined.btn-white:active {
    color: #6f5499;
    background: #FFFFFF;
    border-color: #FFFFFF;}

.btn-xs {
    font-size:11px;
    line-height:14px;
    border: 1px solid;
    padding:5px 10px;}

.btn-sm {
    font-size:12px;
    line-height:16px;
    border: 2px solid;
    padding:8px 15px;}

.btn-lg {
    font-size:18px;
    line-height:22px;
    border: 4px solid;
    padding:13px 40px;}

我希望在桌面上有效：

good_mobile

带有全文显示功能的手机上的+响应按钮。我认为问题出在网格上，但当我改为其他值时，我会遇到同样的问题。

Answer 1

使用隐藏和可见类内置的bootstrap

仅在手机上查看

Class="visible-xs"

在手机上隐藏

Class = "hidden-xs"

平板电脑，中型台式机和大型桌面的类也有sm，md和lg垂直。

这些类非常方便，但您可能需要自定义媒体查询。

Answer 2

检查以下

.btn-lg
.btn-md
.btn-sm
.btn-xs

lg-Large，md-Medium，sm-small，xs-extra small

见下面的链接可能对你有用

Media Queries: How to target desktop, tablet and mobile?

Bootstrap - 手机上的按钮显示＆amp;桌面

2 个答案: