Стол как у div внутри карты bootstrap4

Question

У меня проблемы с созданием card.Я пытаюсь сделать две колонки: одну col-xs-3 и другую col-xs-9.Заголовки в col-xs-3 должны совпадать с заголовком в col-xs-9.

Почему-то мне не удается это сделать.

Ниже приведена копия моей карты, как она выглядит сейчас ... Кто-нибудь может мне помочь с этим?

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">



  <div class="card">
    <div class="card-body">
      <div class="container">
        <div class="row">
          <div class="col-xs-3 detail-titles">
            <p>1 title</p>
            <p>2 title</p>
            <p>3 title</p>
            <p>4 text</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-9 text-right">
            <p>1 title-match</p>
            <p>2 title-match</p>
            <p>3 title-match</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
              porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
              convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
              gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
              vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

col-xs недоступно bootstrap4

Удалить container(row) div этого родителя <div class="col-sm-9 text-right">

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">
  <div class="card">
    <div class="card-body">
      <div class="container">
        <div class="row">
          <div class="col-sm-3 detail-titles">
            <p class="border-bottom">1 title</p>
            <p class="border-bottom">2 title</p>
            <p class="border-bottom">3 title</p>
            <p class="border-bottom">4 text</p>
          </div>
          <div class="col-sm-9 text-right">
            <p>1 title-match</p>
            <p>2 title-match</p>
            <p>3 title-match</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
              porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
              convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
              gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
              vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

У вас есть два элемента 'row', но требуется только один.

Я также изменил xs на sm в ваших столбцах начальной загрузки, потому что вы используете boostrap 4. Смотрите следующее: `col-xs- *` не работает в Bootstrap 4

<div class="card">
    <div class="card-body">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 detail-titles">
                    <p>1 title</p>
                    <p>2 title</p>
                    <p>3 title</p>
                    <p>4 text</p>
                </div>
                <div class="col-sm-9 text-right">
                    <p>1 title-match</p>
                    <p>2 title-match</p>
                    <p>3 title-match</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat.
                      Proin nec lorem a nisi tristique porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus.
                      Integer at  diam convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam.
                      Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem.
                      Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget, vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>