全宽容器-流体，带有在twiiter-bootstrap中换行文本的容器

uidvcgyl 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(122)

我试图实现像下面的图像中的深蓝色和浅蓝色使使用 Bootstrap 的完整网格。

浅蓝色的框应该一直延伸到左边，深蓝色的框应该一直延伸到右边。但是内容应该留在容器中，并根据容器进行调整。
jsFiddle

我的方法：

我已经取得了同样的帮助下，以下标记：

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所以，我把两列放在一个容器中的一行中。然后我添加背景图像，使其始终居中。但我想通过为各个部分添加背景颜色来实现这一点，而不是添加单个背景图像。
因此，如果有人能提出一种方法来实现这样的布局，而不使用定位和背景图像。

CSS格式：

#wrapper {
    background: url(img/banner-bg.jpg) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-size: cover;
}

twitter-bootstrap

来源：https://stackoverflow.com/questions/37076815/full-width-container-fluid-with-container-to-wrap-text-in-twiiter-bootstrap

2条答案

按热度按时间

chhkpiq41#

使用伪元素（：：before，：：after）可以很容易地实现这一点，而不会影响Bootstrap网格！它需要定位，但不是定位到主元素，而是定位到伪元素。
以下是一个解决方案（在SCSS中）：http://codepen.io/hellojebus/pen/eZxOGG

#wrapper {
  overflow: hidden;
} 

.scheduler-col {
  position: relative;
  &:before {
    position: absolute;
    content: " ";
    top: 0;
    //a very large number for width
    width: 6000px;
    height: 100%;
  }
  &.is-left::before {
    //0 - the padding-left/right on bootstrap col
    right: -15px;
    background: #f1f1f1;
  } 
  &.is-right::before {
    //0 - the padding-left/right on bootstrap col
    left: -15px;
    background: #888;
  }
  .title {
    position: relative;
    z-index: 3;
  }
}

赞(0）回复(0）举报 2022-12-07

jmp7cifd2#

这里有一个使用Bootstrap 5的更干净的方法（尽管你可以适应以前的版本），它不在pseudos之前用途：：，而是在内容后面放置一个绝对定位的div，使用相同的网格格式来创建你选择的背景样式。
https://codepen.io/powen-cs/pen/KKewxov

#wrapper {
  overflow: hidden;
  position: relative;
  .content-over {
    z-index: 20;
    .title {
      position: relative;
      z-index: 3;
    }
  }
  .background-style-box {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    .box-style-1 {
      background: #ccc;
    }
    .box-style-2 {
      background: #f3f3f3
    }
  }
}

赞(0）回复(0）举报 2022-12-07

我来回答

全宽容器-流体，带有在twiiter-bootstrap中换行文本的容器

2条答案

相关问题

热门标签

最新问答