Twitter Bootstrap嵌套容器与背景图片-响应式

Question

I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. 我正在尝试使用Twitter Bootstrap嵌套容器，以在此屏幕快照中实现以下目的。 In the PSD the bubble image height is 404px. 在PSD中，气泡图像的高度为404px。 I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this? 我需要它在所有设备上都看起来不错，因此响应性是必须的，应该相应地扩展而不会使屏幕不知所措。有人可以指出正确的方向来为此钉住CSS吗？

I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. 我已经添加了到目前为止在Bootstrap中所做的一切，以实现此目的，但是它已经关闭，需要正确设置容器。 I've read that containers in bootstrap shouldn't be nested but "can be". 我读过，引导程序中的容器不应嵌套，而应“可以”。

I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap. 我有嵌套的容器，但是用Bootstrap似乎无法实现屏幕快照中的内容。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Page Title</title>
</head>
<body>
    <div class=".container-fluid">
        <div class="row">
            <div class="col-lg-12 top">
                TOP TRENDING STORY FOR AUGUST 21, 2019
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 bg-top">

                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">

                                test 1

                            </div>

                            <div class="col-md-6">

                                Test 2

                            </div>

                        </div>
                    </div>

            </div>
        </div>
    </div>
</body>
</html>

CSS CSS

.top{

    background-color: #d42222;
    color:#FFFFFF;
    font-size:23px;
    text-align: center;

}

.bg-top{

    background:transparent url('../images/background-top.png') no-repeat center center /cover;

}

Answer 1

This needs some styling to get what you want; 这需要一些样式来获得所需的内容。 You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; 您可以看一下由Bootstrap .container插入的左右边距，并且可能要覆盖它们。 to get closer to the image you shared, I added some top and bottom margins myself; 为了更接近您共享的图像，我自己添加了一些上下边距；

Complete working snippet below: 完整的工作片段如下：

 .redBanner { background: red; } .redBanner p { margin-bottom: 0; } .myExternalContainer { background-image: url("https://www.akberiqbal.com/Jumbo.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: lightblue; padding-bottom: 5%; } .myInternalContainer { margin-top: 10%; margin-bottom: 10%; } .innerMostContainer { margin: 10%; } .innerMostContainer button { width: 100%; } .container { background: #fff }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container-fluid myExternalContainer"> <div class="row"> <div class="col-lg-12 top redBanner"> <p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p> </div> </div> <div class="container myInternalContainer"> <h3 class="text-center"> medicare</h3> <div class="row"> <div class="innerMostContainer"> <div class="row"> <div class="col-lg-12 bg-top"> <img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' /> <div class="row"> <div class="col-6"> Author Name <br/> Published date </div> <div class="col-6"> <button type="button" class='btn btn-primary'>Read time</button> </div> </div> </div> </div> </div> </div> </div> </div>

Twitter Bootstrap嵌套容器与背景图片-响应式

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-26 00:54:08

Twitter Bootstrap嵌套容器与背景图片-响应式

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-26 00:54:08

解决方案1
1 已采纳 2019-08-26 00:54:08