добавьте класс 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>