Bootstrap - контейнер для смешивания и контейнерная жидкость

В настоящее время я строю сайт, который является одним из тех высоких страниц, разбитых на горизонтальные панели для каждой отдельной секции.Bootstrap - контейнер для смешивания и контейнерная жидкость

Некоторые из горизонтальных панелей имеют фиксированную ширину, центрированную по центру (см. 1,2,3,5 на диаграмме), а некоторые имеют полную ширину (см. Диаграмму 4). Для фиксированной ширины я использую класс «.container», и это достаточно просто и работает нормально. Для панелей полной ширины я использую «.container-fluid».

Теперь проблема я столкнулся заключается в следующем (см изображение для справки.)

Так панель 4 полная ширина и состоит из 2-х колонок. Текстовое содержимое находится между B & C и C & D, однако есть 2 фоновых изображения, которые охватывают от A до C и C до E, и я не могу понять, как это сделать.

Я попытался разбить его на 2 столбца, а затем установить фиксированную ширину в середине, но не может заставить его работать. Здесь я нахожусь в настоящее время:

<div class="container-fluid"> 
    <div class="col-sm-6"> 
     <img src="" /> 
     <div class="container"> 
     </div> 
    </div> 

    <div class="col-sm-6"> 
     <img src="" /> 
     <div class="container"> 
     </div> 
    </div> 
</div>

Любые советы очень ценятся.

источник

2015-10-21 IanS

EDIT: Добавлено две колонки для сплит container-fluid.

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

<div class="container topContainer"> 
    <p>Content here</p> 
</div> 
<div class="container-fluid midContainer"> 
    <div class="row"> 
     <div class="col-sm-6 leftPad"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-6 rightPad"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 
<div class="container botContainer"> 
    <p>Content here</p> 
</div>

И для настройки фона, используйте следующий CSS:

.leftPad { 
    background-image: url('example.jpg'); 
} 
.rightPad { 
    background-image: url('example2.jpg'); 
}

Это должно обернуть его вверх, и держать его в чистоте, не портя ничего. Чтобы отрегулировать поля и другие места размещения, выполните некоторые CSS для тех пользовательских классов, которые я настроил на примере.

Как совет Я бы сказал, что не используйте контейнер внутри строки или столбца. Оберните всю страницу внутри столбца и разделите содержимое на строки и столбцы, чтобы удовлетворить ваши потребности.

Счастливое кодирование!

источник

2015-10-21 10:08:02 ProDexorite

Благодаря ProDexorite, но я не думаю, что это охватывает имеющие фоновые изображения от А до С и С-Е? – IanS

Отредактирован ответ. В принципе, вы хотите разбить контейнерную жидкость в двух столбцах, а затем разделить столбцы пополам. Таким образом, вы будете поддерживать отзывчивый дизайн, не имея слишком много шума с помощью прокладок и полей. – ProDexorite

Работал, спасибо большое! – IanS

Ниже представлена структура и использовать изображения в качестве фона изображения контейнера-жидкость DIV

<div class="container-fluid"> 
<div class="container"> 
    <div class="col-sm-6"> </div> 
    <div class="col-sm-6"> </div> 
</div> 
</div>

источник

2015-10-21 10:03:51

-1

Вы можете разделить их в двух контейнерах, каждый данный 50% от максимальной ширины;

A - C может быть предоставлено изображение, подобное этому, с разделенным на две части (каждые 50%);

HTML

 <section id="yourImage" style="background: url(img/img.jpg) center center; background-size: cover;" > 
       <div class="left"></div> 
       <div class="right"> 
        <h1>AND NOW YOU CAN ADD TEXT HERE</h1> 
       </div> 
     </section>

CSS

 .left, .right{ 
      width: 50%; 
      float: left; 
     }

источник

2015-10-21 10:05:51 n3sutran

Нашли несколько решений, но все использованные javascript. Итак, вот мое решение только для CSS.Ура :)

/* just some styling for better view */ 
 

 
#mix { 
 
    background: black; 
 
    color: #fff; 
 
} 
 
.left { 
 
    background: url('https://static.pexels.com/photos/462254/pexels-photo-462254.jpeg') no-repeat center/cover; 
 
} 
 
.right { 
 
    background: url('https://static.pexels.com/photos/534020/pexels-photo-534020.jpeg') no-repeat center/cover; 
 
} 
 
.row { 
 
    border-top: 1px solid black; 
 
} 
 
.col-sm-6 { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
/* and this below is basically what you need */ 
 

 
@media (min-width: 768px) { 
 
    .half-container { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    max-width: 375px; 
 
    } 
 
    .left-half-container { 
 
    margin-right: -15px; 
 
    } 
 
    .right-half-container { 
 
    margin-left: -15px; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .half-container { 
 
    max-width: 485px; 
 
    } 
 
} 
 
@media (min-width: 1200px) { 
 
    .half-container { 
 
    max-width: 585px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="mix"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="left col-sm-6"> 
 
     <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
     <div class="right col-sm-6"> 
 
     <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="left col-sm-6 clearfix"> 
 
     <div class="half-container left-half-container pull-right text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
     <div class="right col-sm-6 clearfix"> 
 
     <div class="half-container right-half-container pull-left text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-09-06 14:20:56 Sharak

Bootstrap - контейнер для смешивания и контейнерная жидкость

ответ

Смежные вопросы