Bootstrap中的多列 - 删除从一列溢出到下一列的padding。

Question

我试图设置一个图像和文本，以便在非常宽的视口中，文本设置为两列，图像浮动在第一列。当有大量文字时，这一切都很好，但当没有文字时，在第二列顶部的文字中会出现空白的情况。看起来就像图片填充物以某种方式流入第二列，如下图所示。

显然我不希望出现这种空隙。

改变图片上的padding-bottom似乎可以解决这个问题，但它只是在其他设备上以不同的方式重新出现。需要一个更根本的解决方法。

CSS并不是我的强项，但我花了很多时间去寻找类似问题的参考资料，以及管理padding和overflow的方法，但到目前为止都无济于事。如果有任何提示，我将不胜感激。

body {
    margin: 0px;
    background-color: #ffffff;
    color: #333333;
    font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}

/* Override Bootstrap/Normalize defaults */
h1, .h1 {
    font-size: 24px;
}

#titlearea {
    text-align: center;
}
#titlearea h1 {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

.bio-image {
    width: 38%;
}

@media (min-width:768px) {

}

@media (min-width:992px) {
    .split2columns {
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
        min-height: 0;
    }
}

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Padding Overflow</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,latin-ext">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body class="zmso-public">
        
        <div class="container">
            <div id="titlearea">
                <div class="row">
                    <div class="d-md-none col-8 offset-2">
                        <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
                        <h1 class="text-center text-md-left">Title</h1>
                    </div>
                </div>
            </div>
            <div id="infoarea">
                <div class="row">
                    <div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
                        <span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
                        <div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>

你需要让结果窗口足够宽以显示问题。在JSFiddle中可以更容易的看到这个问题。https:/jsfiddle.netnhsyuqac. 对我来说（在Mac上），它出现在Firefox上，当结果窗口宽于1200px时，Chrome浏览器宽于992px（尽管确切的字体，字体大小和行高会影响这一点--与JSFiddle内部相比，它在浏览器中的行为有点不同）。

Answer 1

你可以简单的使用display:flow-root;属性为rich-text类。

body {
    margin: 0px;
    background-color: #ffffff;
    color: #333333;
    font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}

.rich-text{
    display:flow-root;   
}

/* Override Bootstrap/Normalize defaults */
h1, .h1 {
    font-size: 24px;
}

#titlearea {
    text-align: center;
}
#titlearea h1 {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

.bio-image {
    width: 38%;
}

@media (min-width:768px) {

}

@media (min-width:992px) {
    .split2columns {
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
        min-height: 0;
    }
}

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Padding Overflow</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,latin-ext">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body class="zmso-public">
        
        <div class="container">
            <div id="titlearea">
                <div class="row">
                    <div class="d-md-none col-8 offset-2">
                        <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
                        <h1 class="text-center text-md-left">Title</h1>
                    </div>
                </div>
            </div>
            <div id="infoarea">
                <div class="row">
                    <div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
                        <span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
                        <div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>

Bootstrap中的多列 - 删除从一列溢出到下一列的padding。

问题描述投票：0回答：1

1个回答

最新问题

Bootstrap中的多列 - 删除从一列溢出到下一列的padding。

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1