首页 文章

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

提问于
浏览
1

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

这是我的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;
}

2 回答

  • 0

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

  • 1

    尝试更改为此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 -->
    

相关问题