Расширить строку начальной загрузки за пределами контейнера

Мы используем Bootstrap 3 на нашем сайте, и у меня есть запрос на новый шаблон с дизайном, в котором есть некоторые элементы, которые на самом деле не соответствуют сетке начальной загрузки. Я пытался заставить его работать, но не удалось.

Я попытался объяснить проблему на изображении ниже. У кого-нибудь есть идея, как я могу это решить?

введите описание изображения здесь

html,css,twitter-bootstrap,twitter-bootstrap-3,

4

Ответов: 4

2 принят

Один из вариантов - использовать псевдо- ::beforeэлемент CSS, который будет изменять размер в высоту вместе с col-lg-6..

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}
<div class="container" id="main">
    <div class="row">
        <div class="col-lg-6 left">
            ..
        </div>
    </div>
</div>

http://www.codeply.com/go/C80RYwhWrc

Другой вариант - использовать абсолютную позицию .container-fluid(полную ширину) за содержимым, .containerкоторое действует как «призрак» ...

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="//placehold.it/1000x400">
        </div>
    </div>
</div>

https://www.codeply.com/go/txUHH72f16 (Bootstrap 4)

Похожие вопросы :
Получите две колонки с разными цветами фона, которые расширяются до края экрана.
Пример с изображениями.
Расширьте элемент за контейнером начальной загрузки.

1

Вот вариант решения. Вам нужно создать абсолютный позиционированный div, включить его col-xs-6, но этот контейнер должен иметь. position: static Что касается ширины экрана 1padding-left: calc ((100% - 1170px) / 2); и больше ширина контейнера 1170px, вы можете рассчитать padding-left для плавающего div:.blk { background: lightgreen; width: 50%; position: absolute; } .container { background: tomato; height: 100vh; padding: 40px 0; } @media only screen and (min-width: 1200px) { .cell { position: static; } .blk { left: 0; right: 50%; padding-left: calc((100% - 1170px) / 2); } }

<div class="container">
<div class="row">
    <div class="col-lg-6 cell">
        <div class="blk">Lorem ipsum dolor</div>
     </div>
  <div class="col-lg-6">Lorem ipsum dolor</div>
</div>
</div> 
<div class="container" style="width:1200px">
    <div class="row">
        <div class="col-lg-6">

        </div>
    </div>
</div>

http://www.codeply.com/go/CikO35yioi

0

Я действительно не понял, что вы имели в виду. это то, что я думаю, что вы имели в виду.

200px

DEMO: http://jsfiddle.net/jayjay95/ybx97y2c/
(если это то , что вы хотите, изменить ширину контейнера 200pxв 1200pxи col-xs-6к col-lg-6.

0

Вы можете использовать этот код ниже:

<!DOCTYPE html>
  <html class=" desktop landscape" lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Example</title>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <style type="text/css">
        .side{background-color: lightgrey;

        }
        .middle{background-color: green;
        }
        .red{background-color: red;
            }
    </style>
    </head>
    <body>
        <div class="container-fluid">
            <!-- 1st section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 2nd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="row">
                        <div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 3rd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
        </div>  
    </body> 
</html>
HTML, CSS, твиттер-самозагрузка, твиттер-самозагрузка-3,
Похожие вопросы
Яндекс.Метрика