Question

Bootstrap新手并试图布局一个非常简单的页面。

在下面添加img元素（＆＃39; Great price＆＃39;）时，这会在便携式设备的右侧产生某种差距，并且html和body元素不再覆盖整个页面。我已经尝试使用CSS调整它并将行类调整为行流体等，但是经过几个小时后，我仍然无法找到问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="C:\Users\brian\Desktop\Web Design\Traders web\TemplateOne.css">
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

    <title>Template One</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-#674c8a .bg-#e23c3a">
        <a class="navbar-brand" href="#">Joe Bloggs Electrics</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                </li>
            </ul>
        </div>
            <ul class="nav navbar-nav navbar-right">
                <li>Tel: 077777777777</li>
           </ul>
    </nav>

    <div class="row">
            <div class="col-lg-12">
                <img src="C:\Users\brian\Desktop\Great Price.png" class="img-responsive" style="width: 100%">
            </div>  
    </div>


        <div class="row-fluid">
            <div class="col-lg-12">
                <h2>Plymouth and surrounding areas</h2>
            </div>  
    </div>
<div class="container-fluid">
        <div class="row-fluid">
            <div class="col-lg-4">
                        <i class="fas fa-pound-sign fa-8x"></i>
                        <p>Pricing</p>                  
            </div>
            <div class="col-lg-4">
                        <i class="fas fa-comment-alt fa-8x"></i>
                        <p>Testimonials</p>                 
            </div>
            <div class="col-lg-4">
                        <i class="fas fa-mobile-alt fa-8x"></i>
                        <p>Contact</p>              
            </div>
        </div>
    </div>
<!--    <div class="row-fluid">
    <footer>
        <p id="copyright">Copyright: Joe Bloggs Electrics</p>
    </footer>
</div> -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Answer 1

尝试使用img-responsive替换img-fluid课程。因为在bootstrap 4版本中更新了一些类......

bootstrap img导致html和body不全长

1 个答案: