Question

我的引导按钮在移动设备上超出了屏幕宽度。如何修复它以便在移动设备上正确呈现？由于某种原因，移动按钮在屏幕右侧，背景图像缩小了它的宽度，因此它不会覆盖屏幕的整个宽度。

这是我的HTML：

 <!-- Header -->
<div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-7">
                <div class="intro-message">
                    <h1>Fruit Exchange</h1><br>
                    <p class="subtitle">In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p>
                    <p class="intro-divider"></p>
                    <a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary btn-lg">Register Now to Buy Fruit from Our Warehouse</a>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.intro-header -->

这是我的CSS：

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url(http://cdn.tutorialzine.com/wp-content/uploads/2015/06/bootstrap-examples.jpg) no-repeat center center;
    background-size: cover;



  .intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

  .subtitle {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 23px;
    color: #ffffff;
    letter-spacing: 0.2px;
    line-height: 1.5;
}

  .intro-divider {
    width: 400px;
    border-top: 3px solid #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0);
    margin: 41px 0 50px 0;
}

  /* Button */

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.btn-primary {
    background: #DB4632;
    color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #DB4632;
}

.btn-primary:active, .btn-primary.active {
    background: #DB4632;
    box-shadow: none;
}

Answer 1

您的col-lg-7未应用于较小的屏幕。添加适合大小的类，并记住类将级联。尝试使用col-xs-7，看看它是否可以接受。

Answer 2

尝试更改为此HTML。您可以使用col-md-12和col-xs-12

<!-- Header -->
<div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-7 col-md-12 col-xs-12">
                <div class="intro-message">
                    <h1>Fruit Exchange</h1><br>
                    <p class="subtitle">In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p>
                    <p class="intro-divider"></p>
                    <a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary btn-lg">Register Now to Buy Fruit from Our Warehouse</a>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.intro-header -->

在移动设备上，Bootstrap按钮超出了屏幕宽度

2 个答案: