Question

我正在尝试使用bootstrap创建响应式网页。在小视图（xs和sm）中，页面工作正常。我为一些较小的视图隐藏了一些图像，它有一个非常标准的布局。

当我增加屏幕尺寸时问题就开始了。在大视图（＆gt; = md）中，我尝试使用一行逐列堆叠四个图像。无论我做什么，第四张图片总是进入下一行。

我尝试将边距，填充和边框设置为零，但仍然没有运气。我在代码笔中附加了我的问题链接。实际的html文件和css略大，所以我缩小它只是为了显示有问题的部分。请忽略我的代码中任何未使用的类或ID。感谢

https://codepen.io/maheenul/pen/mLdmvy?editors=1100

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Responsive Design Lab</title>
        <link rel="stylesheet" type="text/css" href="css/responsive.css"/>
        <meta charset = "UTF-8">
        <!-- Latest compiled and minified CSS -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    </head>

    <body>

        <section id = "center">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2>Images not confined within the row</h2>
                        <div class="myClass">
                            <h3> Loren Ipsum</h3>
                        </div>
                    </div>
                </div>

                <div class="row  d-none d-md-block">
                    <img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
                    <img class="col-md-3" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" alt="Solar Car">
                    <img class="col-md-3" src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" alt="campus">
                    <img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
                </div>
            </div>

        </section>

        <footer>
            <p>The images above don't stack .<br/> Responsive Design</p>
        </footer>
    </body>
</html>

CSS：

body{
    margin: 1%;
    padding:1%;
    background-color: rgba(0,0,255,.2) !important;
    font-size: 100%;
    min-width: 500px;
}

header, footer{
    background-color:#0066FF;
    padding: 1%;
    margin: 1%;
}

header h1{
    font-size: 3rem;
    color:rgba(0,0,0,.7);;
}

section{
    margin:0%;
    padding:0%;
}

.myClass{
    margin: 0em 1em;
    padding:.75em;
    border: 1px solid black;
    border-radius: .25%;
}

footer{
    clear: both;
    text-align:center;
    text-transform: uppercase;
}


@media screen and (min-width: 768px){
    header, footer{
        background-color:transparent;
    }

    img{
        display: inline-block;
        margin: 0;
        padding: 0;
        border:0; 
        overflow: auto;
    }

}

Answer 1

添加font-size：0; on＆lt; div class =＆＃34; row d-none d-md-block＆＃34;＆gt;。图像之间的空间占据了空间，这就是为什么它不适合一行。

Answer 2

您与row d-none d-md-block的问题在于Bootstrap 4中的Grid不是块元素;它是flex。此代码将MD +设备上的显示方法从flex更改为块。

要使用的正确类是row d-none d-md-flex。执行此操作时，您可以恢复Bootstrap的网格行为;但是，当您将网格直接应用于图像时，也会导致图像显示不正确。为了解决这个问题，我们必须在图像周围包裹列，然后将一些响应式图像行为应用到实际的图像元素。

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>Images not confined within the row</h2>
      <div class="my-3 p-3 border border-secondary bg-secondary text-light">
        <h3>Loren Ipsum</h3>
      </div>
    </div>
  </div>
            
  <div class="row align-items-center d-none d-md-flex">
    <div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
    <div class="col-md-3"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" class="img-fluid img-thumbnail" alt="Solar Car"></div>
    <div class="col-md-3"><img src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" class="img-fluid img-thumbnail" alt="campus"></div>
    <div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
  </div>
</div>

＆＃13;

注意：由于我们要在最小的断点处隐藏元素，因此您需要展开代码段才能看到完整的结果。

图像没有在bootstrap 4.0中的一行中按列堆叠

2 个答案: