Как переполнить / расширить / удалить столбец Bootstrap до края области просмотра? - PullRequest
Новая
       35

Как переполнить / расширить / удалить столбец Bootstrap до края области просмотра?

0 голосов
/ 07 июля 2019

Я пытаюсь воссоздать поисковый интерфейс страницы Airbnb (например, https://www.airbnb.nl/s/Paris/homes). К сожалению, у меня возникают некоторые трудности при расширении раздела карты до крайнего правого края области просмотра.

Это то, чтоМне нужно: https://i.ibb.co/zrpwYhC/Artboard.jpg

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

То, что я попробовал сам, это абсолютно позиционирование карты вправо (вне системы координатной сетки) и придание ей определенной ширины. Это работает, но это не является предпочтительным.

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

Я создал пользовательскую базу CSS и HTML: https://jsfiddle.net/Lwhgpzrt/

.suggestions {
    background-color: #F2F2F2;
    border: 1px solid #000;
}

.result-wrapper {
    padding-top: 45px;
    padding-bottom: 45px;
    background-color: lightskyblue;
    border: 1px solid #000;
}

.result {
    background-color: white;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 30px;
    border: 1px solid #000;
}

.map-wrapper {
    height: 100%;
    background-color: lawngreen;
    border: 1px solid #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="suggestions">
    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="result-wrapper">
                    <div class="row">
                        <div class="col-12"><div class="result">Result here</div></div>
                        <div class="col-12"><div class="result">Result here</div></div>
                        <div class="col-12"><div class="result">Result here</div></div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="map-wrapper">Google Map here</div>
            </div>
        </div>
    </div>
</section>

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

Наиболее важным является то, что решение должно следовать системе сетки Bootstrap.Желательно, чтобы это было только CSS-решение.

Может кто-нибудь подтолкнуть меня в правильном направлении?Помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Сначала вам нужно .container-fluid вместо .container. При этом весь view-порт занят. А затем используйте .offset-*, чтобы получить левый боковой зазор.

Смещение столбцов

Вы можете сместить столбцы сетки двумя способами: наш отзывчивый .offset-grid классы и наши запасы полезности. Классы сетки рассчитаны в соответствии столбцы в то время как поля более полезны для быстрых макетов, где Ширина смещения является переменной. - getBootstrap.com

Используйте .pr-0 в столбце карты, чтобы удалить его отступ справа. 

.suggestions {
  background-color: #F2F2F2;
  border: 1px solid #000;
}

.result-wrapper {
  padding-top: 45px;
  padding-bottom: 45px;
  background-color: lightskyblue;
  border: 1px solid #000;
}

.result {
  background-color: white;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 30px;
  border: 1px solid #000;
}

.map-wrapper {
  height: 100%;
  background-color: lawngreen;
  border: 1px solid #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="suggestions">
  <div class="container-fluid">
    <div class="row">
      <div class="offset-2 col">
        <div class="result-wrapper">
          <div class="row">
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 pr-0">
        <div class="map-wrapper">Google Map here</div>
      </div>
    </div>
  </div>
</section>

Я использовал .offset-2. Измените его, если разрыв больше / меньше того, что вы хотите получить. Используйте .col вместо .col-8, поскольку его легче поддерживать. В противном случае подсчитайте, какой .col-* вам нужно использовать. В этом случае вам нужно .col-6, так как .col-6 = .col-12 - (.col-4 + .col-2)

https://codepen.io/anon/pen/rEqQKm

0 голосов
/ 07 июля 2019

переопределить стандартную максимальную ширину bootdtrap и спецификации заполнения класса .container

  1. установить максимальную ширину на 100%.
  2. установить отступы на 0;

Установить поле справа: 0px в классе .row

Установите padding-right в 0 в классе .col-4, оборачивающем элемент карты

Также укажите значение margin-left в классе .suggestions (предпочтительно в процентных значениях), чтобы оставить свободное место, если хотите.

...