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

Ответ 1

Вы можете использовать блок vw, чтобы установить ширину изображения на 50% ширины окна просмотра. Вам нужно будет обнулить заполнение ячейки сетки, которая обертывает изображение. Блок vw поддерживается всеми основными браузерами:

.row .col-img-wrap {
  padding-left: 0;
  padding-right: 0;
}
.col-img-wrap img {
  width: 50vw;
}
.col-align-right img {
  float: right;
}
/* not needed */
.container {
  border: 1px red solid
}
.row {
  background-color: #bca;
}
.col-xs-12 { 
  text-align: center;
  padding: 3em;
  background-color: #abc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-6">
        This is some content inside a col-xx-6 cell
      </div>
      <div class="col-xs-6 col-img-wrap">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-12">
        This is some content inside a col-xx-12 cell
      </div>
      <div class="col-xs-6 col-img-wrap col-align-right">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-6">
        This is some content inside a col-xx-6 cell
      </div>
    </div>
  </div>
</div>

Ответ 2

Попробуйте следующую структуру HTML:

<div class="container-fluid screen-image">
    <div class="row">
        <div class="col-md-offset-6 col-md-6 col-sm-12 image-content">
        </div>
    </div>
</div>

<div class="content-wrapper">
    <div class="container">
        <div class="col-md-6">
            my content
        </div>
        <div class="col-md-6">
            content 2
        </div>
    </div>
</div>

Затем используйте этот CSS:

    .screen-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0; /* Cover the full screen width */
    }

    .screen-image .image-content {
        height: 400px; /* Dummy height. Change with your desired height */
        background: url("image.png") no-repeat;
        background-size: cover; /* Anything that suits your needs */
        background-position: 0 0;
    }

    .content-wrapper {
        position: relative; /* Go on top of the screen-image */
    }

Вот краткое объяснение:

• Мы устанавливаем position: absolute на контейнер фонового изображения. Мы не хотим, чтобы он удалял контент.
• Снабжение экранным изображением 0 приведет к тому, что заполнение содержимого контейнера по умолчанию будет по умолчанию. Таким образом, изображение будет закрыто на весь экран.
• Для содержимого нам понадобится относительная позиция. В противном случае он появится под элементом .screen-image.
• На .screen-image .image-content нам нужно установить .col-sm-12, чтобы он охватывал весь экран на мобильном устройстве. У нас нет двух столбцов, поэтому имеет смысл покрыть весь экран фоновым изображением.

EDIT (тег img)

Пример с дружественным поисковым тегом SEO: http://codepen.io/avladov/pen/bpKvYd

Ответ 3

Похоже, это происходит потому, что вы использовали контейнер внутри контейнерной жидкости. Попробуйте заменить класс контейнера классом row. Это решит вашу проблему наверняка.

Удачи.

Ответ 4

Согласно Документация Bootstrap, ваш HTML-код неверен,

• вы не должны иметь .container сразу после .container-fluid
• после .container вы должны иметь .row

С правильным HTML и из того, что я понял, вам просто нужно reset значение начальной загрузки padding, указанное в классах col-.

UPDATE

Вам нужно будет указать width на container-fluid, а затем использовать position:relative (который уже загружен в -col) и с помощью calc() вместе с единицами просмотра.

Примечание Я использую !important только для того, чтобы демонстрация упростилась. в избегать, используя !important, уточнив правило CSS.

body {
  background: rgba(255, 255, 0, .5) !important
}
.container-fluid {
  background: rgba(255, 0, 0, .5);
  width: 70% /*adjust the width accordling to your needs*/
}
[class$="-6"] {
  /*all classes ending with "-6" */
  border: 1px green solid;
  padding: 0 !important;
}
/* the -70vw should be equal to the % width of container-fluid */
.row div:first-of-type {
  left: calc(-70vw + 80%) 
}
.row div:last-of-type {
  right: calc(-70vw + 80%)
}
img {
  opacity: .65
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-6">
      my content
    </div>
    <div class="col-xs-6 col-md-6">
      <img class="img-responsive" src="//lorempixel.com/1000/300" />
      <!-- this should size up to right end of the window, meaning it should overflow .col-md-6 and .container -->
    </div>
  </div>
</div>

Ответ 5

Это не самое приятное решение, но оно действительно работает. Это не так сложно, как хотелось бы.

http://codepen.io/iMarketingGuy/pen/BKVmMj

CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-top: 40px;
    margin-bottom: 40px;
}

.row img {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.floatRight {
    float: right !important;
}

.image {
    float: left;
    width: 100%;
}

.image img {
    float: left;
    width: 100%;
    height: auto;
}

JavaScript

var containerWidth = $(".container").width();

if (containerWidth > 750) {
    $("#row-1-image-col").css({ "position": "absolute", "right": "0", "margin-right": "-15px" });
    $("#row-3-image-col").css({ "position": "absolute", "left": "0", "margin-left": "-15px" });
} else {
    $("#row-1-image-col").css({ "position": "relative", "padding": "0px 15px" });
    $("#row-3-image-col").css({ "position": "relative", "padding": "0px 15px" });
}

var row1ImageColHeight = $("#row-1-image-col").height();
var row1TextColHeight = $("#row-1-text-col").height();

if (row1ImageColHeight >= row1TextColHeight) {
    $("#row-1").css("height", row1ImageColHeight + "px");
} else {
    $("#row-1").css("height", row1TextColHeight + "px");
}

var row3ImageColHeight = $("#row-3-image-col").height();
var row3TextColHeight = $("#row-3-text-col").height();

if (row3ImageColHeight >= row3TextColHeight) {
    $("#row-3").css("height", row3ImageColHeight + "px");
} else {
    $("#row-3").css("height", row3TextColHeight + "px");
}

Ответ 6

конец контейнера перед секцией ширины полного размера, не смешивайте контейнер с жидким контейнером. вы можете иметь несколько контейнеров (контейнер и жидкость для контейнеров один за другим). Не используйте js, если вы можете использовать css. Используйте загрузочную сетку. Также вы можете использовать гибкую сетку для более сложных выровненных сеток, если вам не нужно покрывать старые браузеры. полноэкранный фон, используйте backgroung с свойством cover на более высоком элементе ex. на теге тела. Если вы хотите иметь решение с полной шириной в центре с сеткой, поместите контейнер внутри div с изображением bg.

HTML:

<div class="screen-image">
<div class="container">
<div class="col-xs-6">lorem impsum dolor
    </div>
        <div class="col-xs-6">lorem ipsum dolor 
    </div>
</div>

CSS

.screen-image {

background-image:  url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");

background-position: right top;
background-size: 50% 60px;
background-repeat: no-repeat;}

также вы можете поместить img точно так же, как обычный контент внутри col-xs-6 - он переполнится и будет использовать переполнение, скрытое на ex body, чтобы удалить горизонтальные слайдеры.

решение, которое я выбрал бы, - это фоновое изображение, заданное как 50% размера окна в css. - тогда он будет выровнен с сеткой. также вы можете управлять тем, как он работает с различными разрешениями по медиа-запросам.

Ответ 7

Я бы не подумал, что вам нужен javascript. Когда дело доходит до бутстрапа, вам просто нужно подумать обо всех предметах в головоломке. container-fluid позволяет использовать экран полной ширины. Добавление container col-md-6 делает один столбец с максимальной шириной. Затем a container-fluid col-md-6 создает столбец с половиной страницы без максимальной ширины для изображений на краю. Вот мой код, более краткий вариант от парня выше.

http://codepen.io/MrNagoo/pen/jqvyeP

Конечно, довольно легко создавать свои собственные контейнеры с помощью css при использовании бутстрапа.

Ответ 8

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

Что-то вроде ниже:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde odio assumenda omnis, sunt, quam cum, animi minus fugit, voluptate adipisci illum officiis in non. Animi officia eligendi quos? Est?</p>
    </div>
    <div class="col-md-6">
      <div class="image"></div>
    </div>
  </div>
</div>

Как вы можете видеть, я немного изменил способ упорядочивания div.

Теперь, как бы я решил вашу проблему, помещаем div внутри этого столбца, который вы хотите сделать за пределами контейнера.

Вы можете использовать тег img вместо div.

Я покажу вам пример, используя div и применяя к нему фоновое изображение.

Мы можем добиться желаемого эффекта, если применить CSS ниже:

.image {
  background-image: url('http://lorempixel.com/1024/768');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: calc(50vw - 15px);
}

@media (max-width: 991px) {
  .image {
    width: 100%;
  }
}

ПРИМЕЧАНИЕ. Мы можем использовать блок ширины окна просмотра div внутри столбца и просто снимать ширину желоба сетки, вычисляя его выше.

Объяснение: Ширина окна просмотра (vw) - это единица, которая вычисляет всю ширину текущего экрана, не обращая внимания на размер, который имеет родительский div.

Могу ли я использовать его? vw теперь поддерживается в большинстве современных браузеров. http://caniuse.com/#feat=viewport-units

Что касается запроса @media, я предполагаю, что на меньших экранах, чем md, изображение должно быть применено на 100%.

Вы можете видеть, как это работает, в кодедене ниже: http://codepen.io/ArdianPerlaska/pen/dMqWKp

Ответ 9

i усвоил его с элементом абсолютного положения в качестве родственного брата контейнера. см. код:

 .absolute {
  position: absolute;
  width: 100%;
  height: 500px; //this needs to be fixed always, can be customized through media queries
  .white, .gray {
    float: left;
        width: 100%;
    height: 200px;
    background-color: #e3e3e3;
    @media (min-width:576px){  //make it match with the switch columns/trigger with columns changes
    width: 50%;
    height: 100%;
    }
  }
  .gray {
    background-color: gray; 
    background-image: url('http://www.dailyfreepsd.com/wp-content/uploads/2013/09/sunset-blurred-background-freebie.jpg');
    background-size:cover;    
  }
}


.fixed-height{
  height: 200px; //this needs to be fixed always, can be customized through media queries
  .title, .lead, .list{
    color:white;
  }

}

рабочая пера здесь