为什么我的卡在使用引导时没有响应？

Question

所以我做了张卡片，你可以在这里看到：

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container mr-0 pr-0">
      <div class="row">
        <div class="col-2">
          <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-10 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
          <div>
            <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
            <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size: 12px;">More Text</span>
          </div>
          <div>
            <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
          </div>
        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>
      </div>
    </div>
  </div>
</div>

​

我面临的问题是，如果窗口的尺寸比1920年x1080 p要小，它直到最后才开始堆放每一个div。

文本开始重叠图像和不重叠的东西。我如何正确地使它的响应与引导？

如果你在全屏上运行脚本，它看起来很好，但是如果你开始缩小它，文本就开始重叠等等。为什么呢？如何正确地使用引导带使其响应？

Answer 1

从<div class="container mr-0 pr-0">

• Make中删除分配给每个div的网格中的

1. 中的mr-0 pr-0。

- For `lg` screens, I have allocated 2 grids for image and rest for description. 
- For small and medium screens, I have allocated 4 grids for image and rest for description.

​

看看下面的片段功能是否符合你的要求-

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-2 col-sm-3">
          <img width="150" heigth="150" class="img-fluid " src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-lg-10 col-sm-9 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>

          <div class="col-lg-10 col-md-9 col-xs-5">
            <span class=" col-md-4 col-xs-4" style="font-weight: lighter; font-size:12px;">100 POSTS</span>
            <span class="col-md-5 col-xs-4" style="font-weight: lighter; font-size:12px;">100 FOLLOWERS</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">100 FOLLOWING</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Phone: 100</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size:12px;">More Text</span>
          </div>

          <div>
            <span style="font-weight: normal; font-size:12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
                            </span>
          </div>

        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>

      </div>

​

Answer 2

您所需要做的就是向列- col-{sm|md|lg|xl}-*添加断点。

博士：https://getbootstrap.com/docs/4.5/layout/grid/

您不需要在卡片中添加容器类。只有row和col。

这是一个密码。我删除了许多元素，留下了对这个问题很重要的东西。

​

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

<div class="card">
  <div class="card-body">
    
    <div class="row">
      <div class="col-lg-2">
        <img class="w-100 d-block" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" >
      </div>
      <div class="col-lg-10">
        <div>USERNAME</div>
        <div>100 POSTS</div>
        <div>100 FOLLOWERS</div>
        <div>100 FOLLOWING</div>
        <div>Phone: 100</div>
        <div>Email: 100</div>
      </div>          
      <div class="col-12">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-primary">Extract</button>
      </div>
    </div>
    
  </div>
</div>

​

Answer 3

您应该：

div.card-body

• add

• 将.img-fluid中的div.container.mr-0.pr-0移至img

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-2">
        <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" class="img-fluid" />
      </div>
      <div class="col-10 text-left pr-0">
        <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
        <div>
          <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
        </div>
        <div class="mb-1 mt-1">
          <span style="font-weight: bold; font-size: 12px;">More Text</span>
        </div>
        <div>
          <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
        </div>
      </div>
      <div class="col-12 pr-0 mt-3">
        <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
      </div>
    </div>
  </div>
</div>

​