Карта начальной загрузки, изображение которой находится сверху / слева в зависимости от точки останова столбца? - PullRequest
Новая
       21

Карта начальной загрузки, изображение которой находится сверху / слева в зависимости от точки останова столбца?

0 голосов
/ 12 ноября 2018

Большинство Bootstrap 4 card s с изображениями имеют либо .card-img-top, либо изображение, которое идет куда-то еще, например слева, с использованием дополнительного / пользовательского кода.

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

Смотрите ниже, мои текущие два разных типа карт ...

  • Верхняя часть является более стандартной с применением .card-img-top.
  • Однако в некоторых сценариях на моем сайте мне понадобится более горизонтальный подход с изображением слева, достигнутым не с помощью .card-img-top, а с двумя дополнительными столбцами, расположенными рядом. Вы также видите это на изображении.

enter image description here

Прямо сейчас мне пришлось написать отдельный код для этого - один тип карты для вертикальной, другой для горизонтальной.

Так что мне любопытно - могу ли я иметь карточку с изображением сверху или слева в зависимости от размера столбца, в котором она находится?

Я пытаюсь все обдумать, хотя ... В браузере xs и sm все столбцы будут 12 и требуются вертикальные карты. Но в браузере md и lg ширина столбцов будет изменяться в соответствии с потребностями разметки, как показано на рисунке.

Это может быть достигнуто с помощью однокарточного кода, или есть логика, которая является более сложной, чем просто это?

FYI ...

  1. Вот код для моих вертикальных карт ...

    Интервью 

    <!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->

2

А вот код, который я пытаюсь использовать для карт в горизонтальном стиле ... 

<p><strong>Interviews</strong></p>

<div class="row">





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>


                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>




                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->
          </div>




</div>

(Я стараюсь сделать изображения в стиле «обложки», где они заполняют доступное пространство. Изображения на вертикальной карте должны сохранять альбомную ориентацию, изображения на горизонтальной карте должны быть квадратными. NB. В настоящее время существует проблема с моим горизонтальным кодом карты, который вводит границу / поле под левым изображением, когда текст справа длиннее его.)

1 Ответ

0 голосов
/ 12 ноября 2018

Если я правильно понял ваш вопрос (долго читал :)), вы можете использовать свойство flex-direction.

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

Затем после желаемой точки разрыва (600 пикселей) я сделал столбцы, чтобы иметь направление столбца.

Вы также можете поиграть с классами начальной загрузки и получить тот же результат.

См. Фрагмент ниже или jsFiddle 

.col-4 {
  flex-direction: row;
  display: flex;
}

@media only screen and (max-width: 600px) {
  .col-4 {
    flex-direction: column;
  }
}
<div class="row">
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...