Дополнительное заполнение Bootstrap 4.1 внутри столбца

Возникли проблемы после перехода на bootstrap 4.1. У меня горизонтальные карты работали нормально в 4.0-alpha, но сейчас не так много. На следующем снимке экрана показаны две попытки выравнивания горизонтальных карточек примерно с 75% текста карточки и 25% с миниатюрой изображения справа. Первая попытка представляет собой простую строку с двумя столбцами, а вторая попытка была взята из примера здесь (см. карточку на полпути вниз). Я предпочитаю простоту для обслуживания, но второй пример, очевидно, выглядит лучше (если вы удалите цвета границ), но в любом случае я получаю дополнительные отступы вокруг изображения, и соотношение 75:25 нестабильно в зависимости от размера изображения. Хотелось бы наиболее отзывчивого решения и, если возможно, обслуживаемого решения (я знаю ... нищий, поедающий пирожные).

ЦЕЛЬ: расположить горизонтальные карточки одинакового размера в центральном столбце так, чтобы каждая карточка содержала примерно 75% текста карточки и 25% изображения. Я хочу иметь возможность регулировать это соотношение в зависимости от размера изображения, которое я хочу, или, альтернативно, размера div изображения. Поэтому, если я увеличиваю размер изображения / максимальную ширину, это увеличит столбец изображения / flex-row / что угодно, или увеличение div изображения уменьшит div текста карты. Но независимо от размера собственного изображения он должен заполнять столбец без заполнения.

* Кроме того, обе карты находятся в одном родительском контейнере, поэтому я не уверен, почему одна шире другой.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row-fluid" style="margin-top:3%;">
        <div class="card" style="border:solid;border-color:black;">
          <div class="d-flex flex-row" >
            <div class="p-8 flex-grow-1" style="border:solid;border-color:green;">
              <h3>Card Title</h3>
              This text should expand to 75% of the parent container. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            </div>
            <div class="p-4 flex-grow-2" style="border:solid;border-color:red;">
              This should be 25%
              <img class="card-img-right flex-auto d-lg-block nopadding" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
            </div>
          </div>
        </div>
      </div>

      <div class="row" >
        <div class="card flex-md-row mb-4 box-shadow h-md-250" style="border:solid;border-color:black;">
          <div class="col-lg-8" style="border:solid;border-color:green;">
            <div class="card-body d-flex flex-column align-items-start">
              <div class="card-text mb-auto">
                <h3>Card Title</h3>
                This text should expand to 75% of the parent container. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              </div>
            </div>
          </div>
          <div class="col-md-4" style="border:solid;border-color:red;">
            This should be 25% with no padding
            <img class="card-img-right flex-auto d-lg-block nopadding" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
          </div>
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

введите описание изображения здесь

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

ОБНОВЛЕНИЕ 1

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row-fluid no-gutter">
        <div class="card" style="border:solid;border-color:black;">
          <div class="col-8" style="border:solid;border-color:green;">
            <h3>Card Title</h3>
            This text should expand to 75% of the parent container. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
          </div>
          <div class="col-4" style="border:solid;border-color:red;">
            This should be 25% with no padding
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
          </div>
        </div>
      </div>

      <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
             data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

введите описание изображения здесь

ОБНОВЛЕНИЕ 2

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="row no-gutters">
          <div class="col-sm-8 d-flex  order-1 order-sm-0">
            <div class="card-body d-flex flex-column align-items-start pr-md-3">
              <h3>
                <a href="#">Some title</a>
              </h3>
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
              <a href="#">Continue reading</a>
            </div>
          </div>
          <div class="col-sm-4">
            <img class="d-block img-w-100" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                 data-holder-rendered="true">
          </div>
        </div>
      </div>

      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="row no-gutters">
          <div class="col-sm-8 d-flex  order-1 order-sm-0">
            <div class="card-body d-flex flex-column align-items-start pr-md-3">
              <h3>
                <a href="#">Some title</a>
              </h3>
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
              <a href="#">Continue reading</a>
            </div>
          </div>
          <div class="col-sm-4">
            <img class="d-block img-w-100" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
                 data-holder-rendered="true">
          </div>
        </div>
      </div>

      <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
             data-holder-rendered="true" style="width: 400px; height: 400px;">
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

(Снимок экрана сделан при увеличении браузера на 25%)

введите описание изображения здесь

ОБНОВЛЕНИЕ 3

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


html css bootstrap-4
person user58446    schedule 10.07.2018    source источник
comment
Вы изменили свой вопрос, и части моего ответа больше не актуальны! Здесь даны ответы на вопросы, которые могут помочь не только OP. Изменение тела вопросов эгоистично и не проявляет уважения ни к ответчику, ни к будущему с той же проблемой.   -  person tao    schedule 10.07.2018
comment
Не понимаю, как я изменил свой вопрос. Я обновил только код и снимок экрана на основе того, что вы предложили, в основном вырезал и вставил. Вопрос все тот же. Я могу прояснить все, что непонятно. Очень признателен за вашу помощь и хотел бы дать вам ответ.   -  person user58446    schedule 10.07.2018
comment
Обновляя свой код кодом из ответа, вы меняете вопрос и задаете вопрос, отличный от исходного. Вы не должны этого делать здесь. Вы отказываетесь от помощи, которую вы уже получили, для будущих посетителей.   -  person tao    schedule 10.07.2018
comment
В ПОРЯДКЕ. Я не был уверен, стоит ли мне обновлять вопрос или позволять ему становиться все длиннее и длиннее. Простите за неудобства. Как я могу это исправить? Если вы замените свой ответ, я могу вернуть его в историю вопросов.   -  person user58446    schedule 10.07.2018
comment
Если он становится слишком длинным, установите флажок «Скрыть фрагмент», чтобы фрагменты можно было расширять. Большинство людей добавляют к редактированию префикс Изменить:, чтобы всем было проще понять исходный вопрос и дополнительный запрос / разъяснение. Кроме того, при необходимости используйте более одного фрагмента.   -  person tao    schedule 10.07.2018
comment
Вы забыли использовать добавленный мной CSS (который дает изображение width:100%). Вот почему это не работает. Пользовательский класс img-w-100 не является частью Bootstrap. Я добавил его, чтобы стилизовать изображение, чтобы оно заполнило столбец. В качестве альтернативы вы можете использовать класс w-100.   -  person tao    schedule 10.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

Примечание p-* классы не похожи на классы col-*. «p» здесь означает «заполнение», и p-4 не может заменять col-4.

Если вы хотите соотношение 75/25, используйте row no-gutters для родителя и col-8 и col-4 для непосредственных потомков. Если исходная ширина изображения меньше ширины столбца, нормально не заполнять столбец. Чтобы он заполнил столбец, дайте ему

display:block;  /* or d-block class */
width: 100%;    /* or w-100 class */
height: auto;   /* or h-auto class */

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

Обратите внимание, что col-* должен быть прямым потомком .row или .row-fluid. Система желобов умна и отзывчива, но полагается на эту разметку.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
    <div class="row w-100 no-gutters">
      <div class="col-sm-8 d-flex order-1 order-sm-0">
        <div class="card-body d-flex flex-column align-items-start pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
          <a href="#">Continue reading</a>
        </div>
      </div>
      <div class="col-sm-4">
        <img class="d-block w-100 h-auto" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true">
      </div>
    </div>
  </div>

</div>

Если вы хотите использовать flexbox, чтобы позволить тексту расти в доступном пространстве - ширина минус изображение, для чего в первую очередь был создан flexbox, используйте этот пример:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
  <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
    <h3>
      <a href="#">Some title</a>
    </h3>
    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Continue reading</a>
  </div>
  <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
    data-holder-rendered="true" style="width: 200px; height: 200px;">
</div>

m{*}-*-* набор классов margin, p{*}-*-* набор padding, h-*-* набор height и d-*-* набор display.

Чтобы две карты находились в одном ряду, поместите их в структуру ряд / столбец:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-block" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-block" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>
  </div>
</div>

person tao    schedule 10.07.2018
comment
Спасибо! См. Новый снимок экрана в вопросе. Версия flexbox выглядит хорошо, но я удивлен, что испортил более простую версию col. Я знаю, что вы сказали, что div-ы должны быть прямым потомком, но я попытался поместить div-карту над строкой, и это не помогло (не имело смысла также иметь строку внутри карты). Я надеялся использовать версию col, если вы видите, что не так, поскольку это, вероятно, будет представлять для меня меньше проблем в будущем (если вы не думаете иначе). - person user58446; 10.07.2018
comment
@user, вы сказали: Я хочу иметь возможность регулировать это соотношение в зависимости от размера изображения. Вот что делает макет flexbox. Во всяком случае, я добавил макет с фиксированным соотношением сторон, в качестве примера. Кроме того, я добавил немного CSS, чтобы изменить размер изображения, чтобы он соответствовал полной ширине столбца, а также поместил изображение вверху при переносе строки. - person tao; 10.07.2018
comment
Я попытался добавить CSS в локальный файл под .img-w-100 {width: 100; } но это не сработало. Также попробовал добавить display: block и height: auto, но получил те же результаты. Хотя класс w-100 работал, я предполагаю, что это встроенный класс начальной загрузки. Спасибо за вашу помощь. Я отмечу это как ответ. - person user58446; 10.07.2018
comment
В таком случае это проблема специфики. w-100 размещает width: 100% !important на элементе. - person tao; 10.07.2018