добавьте класс pull-right вместо text-right и удалите класс pull-right на маленьком экране для правильной работы <div class = "col-sm-4 col-lg-4 pull-right"> <div id = " contact-map "> Карта здесь - необходимо расширить до края области просмотра </ div> </ div>

ил проектный запрос, который я просто не могу на всю жизнь отработать. Рассмотрим это изображение, показывающее загрузочную сетку с 12-колоночной разметкой

3 черных прямоугольника представляют:

Колонна прокладкиОсновная область контентаИнтерактивная карта

Раздел3 это проблема; он должен быть идеально выровнен по сеточной системе внутри.container, а также подойдите прямо к краю экранабез переполнения, Как разделы1 + 2 не добавляйте до 6 столбцов, у меня трудный размер раздел3.

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

Обратите внимание, что на данный момент у меня уже есть решение JavaScipt, я ищу решение только для CSS / HTML, чтобы уменьшить мерцание при загрузке страницы.

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

До - между картой и краем области просмотра есть промежуток:

После - карта выравнивается по сетке начальной загрузки фиксированной ширины и краю области просмотра:

Какой-то псевдокод

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-3 col-lg-offset-1">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
</div>
 Scoots22 нояб. 2017 г., 12:24
@Jana Моя проблема в том, что я просто не могу придумать решение, в котором нет явных проблем. Тот факт, что мне нужно, чтобы он не переполнялся, означает, что чрезмерно широкий элемент с элементом верхнего уровня сwidth: 100%;overflow: hidden; отсутствует, и я не могу вручную увеличить ширину, так как мне нужен медиа-запрос для каждого пикселя. Там нет кода отправлено, потому что я не знаю, с чего начать и не могу найти достаточно похожий вопрос
 Granny22 нояб. 2017 г., 12:29
@ Scoots Я могу быть слепым, как летучая мышь, но я не вижу разницы между рисунком 1 и рисунком 2 результата.
 Jana22 нояб. 2017 г., 12:09
предоставить то, что вы пытались ..
 Granny22 нояб. 2017 г., 12:10
Также эта картина не проясняет вопрос вообще. Добавьте текущий и желаемый результат в вопрос, чтобы сделать его более понятным. Также некоторый код будет полезным.
 Scoots22 нояб. 2017 г., 12:24
@Granny Посмотреть редактировать

Ответы на вопрос(5)

на стороне карты. не используйте col-lg-offset-1 для карты, увеличьте столбец с 3 до 4. Это решит проблему

<div class="section left-content side-map">
    <div class="container" style="border:1px solid #ccc;">
        <div class="row">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-4 text-right" style="padding-right:0;">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
    </div>
</div> 
 Scoots28 нояб. 2017 г., 10:52
Там нет отступов,.containerфиксируется элемент ширины в начальной загрузке, это решение оставляет пробел между.containerи край вьюпорта
 Gurmatpal28 нояб. 2017 г., 11:03
добавьте класс pull-right вместо text-right и удалите класс pull-right на маленьком экране для правильной работы <div class = "col-sm-4 col-lg-4 pull-right"> <div id = " contact-map "> Карта здесь - необходимо расширить до края области просмотра </ div> </ div>

эта ручка помогу.

Я добавил отрицательное правое поле в столбец карты, чтобы компенсировать переменный зазор контейнера. Рассчитывается так:calc((100vw - @container)/2*-1) (половина разницы между шириной окна и шириной контейнера) для каждой точки останова начальной загрузки.

к несчастью100vw включает в себя ширину полосы прокрутки, поэтому, если содержимое страницы превышает высоту окна, появляется раздражающая горизонтальная полоса прокрутки. Я завернул контейнер сoverflow-x:hidden; div, так что он просто скрывает дополнительные ~ 20px на правой стороне карты. Я полагаю, что в вашем конкретном случае это нормально, потому что стандартная карта Google имеет достаточно места между правой стороной и полезными элементами управления.

 Scoots23 нояб. 2017 г., 12:48
Это довольно крутое решение, +1. Я собираюсь продержаться до конца награды на всякий случай, если кто-то может придумать что-то, что не имеет такого небольшого переполнения, но сейчас это твердый ответ
 Ilya Myasin23 нояб. 2017 г., 18:16
Посмотрите на последний блок наэта ручка, Если вы можете переопределить размеры по умолчанию для всех контейнеров, это решит проблему.
 Scoots28 нояб. 2017 г., 10:55
Немного подправить, и это выполнимо. Большое спасибо
 Ilya Myasin23 нояб. 2017 г., 18:13
Я знаю только один способ решения этой проблемы переполнения, и я использовал его в одном из своих проектов, но он не совместим с тем, как bootstrap корректирует размер контейнера. Идея состоит в том, чтобы использоватьmargin-[left/right]: calc( (100vw - 1140px) / 2) вместо бутстрапаmargin:auto; width:1140px;, затемmargin-right: calc( (100vw - 1140px) / 2 * -1); в правом столбце выдает именно то, что вам нужно. Но (на моем Mac + Chrome) реальный размер контейнера становится 1125px вместо 1140px, и он не соответствует сетке начальной загрузки начальной загрузки.
Решение Вопроса

rid Layout. Для этого вы можете изменить разметку раздела вашей страницы: избавиться от Bootstrap's.container обертка и заменить.row элемент с вашим собственным контейнером сетки, например следующий HTML:

<div class="section left-content side-map">
  <div class="grid-row">
    <div class="content col">
      Content - remain unchanged
    </div>
    <div class="map-col">
      <!-- the map goes here -->
    </div>
  </div>
</div>

и CSS:

@media (min-width: 768px) {
  .grid-row {
    display: grid;
    /* create 14 columns: 12 build up the actual grid,
       two more columns emulate left/right "margins" */
    grid-template-columns: 1fr repeat(12, 60px) 1fr;
  }

   .content {
    grid-column: 3 / span 7; /* span 7 columns starting from #2 (technically, the 3rd) */
  }

  .map-col {
    grid-column: 10 / span 5; /* span 5 last columns, including the right "margin" */
  }

}

@media (min-width: 992px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 80px) 1fr;
  }
}

@media (min-width: 1200px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 95px) 1fr;
  }
}

Ключевой частью этого решения является то, что «поля», которые поглощают дополнительное горизонтальное пространство за пределами основных 12 столбцов сетки, также являются столбцами сетки (с автоматической шириной), и вы можете сделать так, чтобы ваши блоки перекрывали эти дополнительные столбцы, как и любые другие, поэтому Браузер автоматически выполнит все расчеты для вас.

Вы можете увидеть этот подход в действии в этой развилке CodePen Ильи Мясина:https://codepen.io/SelenIT/pen/mjoomN?editors=1100, Я также добавил-msс префиксами, эквивалентными свойствам CSS Grid, чтобы демо работало и в IE10 +.

 Scoots14 авг. 2018 г., 18:25
И это прекрасно даже с вертикальной полосой прокрутки, так что это в значительной степени превосходное решение. Проект, для которого был поднят этот вопрос, хорошо и действительно вышел за дверь, но с тех пор у меня были похожие конструктивные особенности. Я буду помнить это для будущих случаев - спасибо за ответ на такой старый вопрос. Как я упоминал ранее, я чувствую, что это превосходный ответ, поэтому я на самом деле собираюсь отметить его как принятый.

в начальной загрузкеcontainer имеет ширину вpx.... так дайте.container ширина в% or vw

    .container{
      width: 80vw;
    }
or
    .container{
      width: 80%;
    }
 Scoots28 нояб. 2017 г., 10:05
Дизайн, которому я должен следовать, это фиксированная ширина. Это не решает проблему.
 satyajit rout28 нояб. 2017 г., 11:20
если вы собираетесь использовать фиксированную ширину для контейнера, это создаст проблему в ответ
 Scoots28 нояб. 2017 г., 12:55
Это буквально цель начальной загрузки - используя разные точки останова, вы можете сказать, сколько столбцов занимает ячейка при разных размерах экрана. Контейнер автоматически уменьшается в этих точках останова.

Попробуйте .. Вы должны исправить сетку как 12 разделcol-sm-12 прежде чем разделить это .. и удалитьcol-lg-offset-1 и удалитьposition:padding;

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-12">
            <div class="col-sm-8 col-lg-7">
                Content - remain unchanged
            </div>
            <div class="col-sm-4 col-lg-3">
                <div id="contact-map">
                    Map here - need to extend to viewport edge
                </div>
            </div>
        </div>
    </div>
</div>
 Scoots22 нояб. 2017 г., 13:32
Но этот разрыв является полностью переменным и полностью контролируется конечным пользователем. Я могу компенсировать это с помощью JavaScript (как я уже сделал как (надеюсь) временное решение) - но единственный способ использовать CSS для устранения этого пробела - это создать@media screen and (max-width: 1234px) {} Правило для каждого пикселя - что совершенно нереально.
 Jana22 нояб. 2017 г., 13:28
Вы должны задать разрыв между .container и краем области просмотра браузера ....container
 Scoots22 нояб. 2017 г., 13:21
Это удаляет отступы, добавленные.container, но не компенсирует переменный разрыв, добавленный между.container и край окна просмотра браузера.

Ваш ответ на вопрос