Question

我正在尝试使用bootstrap3制作嵌套列，从逻辑上讲，一切设置都很好，但是我可以看到特定大小的规则会覆盖另一个大小，例如，当屏幕大小为中等但我要应用一些规则时，它会影响大尺寸，文本也会出现在图像顶部，我不知道问题出在哪里。另一个问题是，是否有一种方法可以自动调整图像的大小（缩放）？

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.4.0.min.js"></script>
    <style type="text/css">
        body{ text-align: center; }
        img{ height:150px; width: 150px; margin: 0 auto; display: block; }
        @media (min-width: 768px) and (max-width: 991px){
            div{text-align: left;}
            h1{margin-top: 0;}

        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <section class="col-lg-2 col-md-4 col-sm-12 col-xs-6 col-xs- offset-3  col-lg-offset-0 ">

                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/4.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                        </p>
                    </div>
                    <div class="clearfix visible-sm-block"></div>
                </div>
            </section>

            <section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3  col-lg-offset-0 ">
                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/1.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor 
                        </p>
                    </div>  
                </div>
            </section>

            <div class="clearfix visible-sm-block"></div><!-- as the elements have been broken at some break points-->
            <section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3  col-lg-offset-0 ">
                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/2.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                        </p>
                    </div>
                </div>
            </section>

            <section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3  col-lg-offset-0 ">
                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/3.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                        </p>
                    </div>
                </div>
            </section>

            <section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3  col-lg-offset-0">
                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/1.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                        </p>
                    </div>
                </div>
            </section>

            <section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3  col-lg-offset-0 ">
                <div class="row">
                    <div class="col-sm-1 col-sm-offset-3">
                        <img src="images/2.svg" class="img-circle" alt="1">
                    </div>
                    <div class="col-sm-5">
                        <h1>hello world</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                        </p>
                    </div>
                </div>
            </section>

        </div>
    </div>


</body>
</html>

结果应为以下内容： -大屏幕上有6列 -小屏幕上的全角列 -在中等屏幕上显示3列

Answer 1

使用以下方法自动调整图像大小：

background-size: cover;

对于样式规则，请像{p>那样使用!important

display: block !important;

Bootstrap3嵌套列冲突

1 个答案: