我的 Bootstrap 卡片在小设备上为什么重叠?

huangapple go评论67阅读模式
英文:

Why are my bootstrap cards overlapping on small devices?

问题

以下是您要翻译的内容:

"The following code uses 3 bootstrap cards that display perfectly side by side on large screens. However, on medium size screens, the cards start to overlap and on the small ones, they completely overlap.
I tried to play with class="col-lg-4 col-md-4 col-sm-2" and changed the md-4s to 3s and the sm-2s to 3s and 4s to see if anything would change, but it didn't.

After resizing the window and inspecting the elements containing the class="card center classes, I realized that their actual sizes are not reduced on small devices, they're just overlapping on each other.

Any help will be appreciated."

请注意,我只翻译了文本部分,不包括代码。

英文:

The following code uses 3 bootstrap cards that display perfectly side by side on large screens. However, on medium size screens, the cards start to overlap and on the small ones, they completely overlap.
I tried to play with class="col-lg-4 col-md-4 col-sm-2" and changed the md-4s to 3s and the sm-2s to 3s and 4s to see if anything would change, but it didn't.

After resizing the window and inspecting the elements containing the class="card center classes, I realized that their actual sizes are not reduced on small devices, they're just overlapping on each other.

Any help will be appreciated.

我的 Bootstrap 卡片在小设备上为什么重叠?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  /* border: solid 2px red; */
  background-color: #EDEFEE;
  font-family: &#39;Markazi Text&#39;, serif;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 5%;
  margin-right: 5%;
}

.container {
  background-color: lightpink;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

@media only screen and (max-width: 912px) {
  /* For mobile phones: */
  [class*=&quot;col-&quot;] {
    width: 33%;
    padding: 0;
  }
  .container {
    overflow: hidden;
    padding-top: 25px;
  }
}

<!-- language: lang-html -->

&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot;&gt;

&lt;main&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-2&quot;&gt;
        &lt;div class=&quot;card center&quot; style=&quot;width: 18rem; height: 90%;&quot;&gt;
          &lt;img src=&quot;assets/img/ragout.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot; style=&quot;height: 245px;&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title bg-warning text-danger&quot;&gt;Ragout de pomme de terre&lt;span class=&quot;badge bg-primary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-2&quot;&gt;
        &lt;div class=&quot;card center&quot; style=&quot;width: 18rem; height: 90%;&quot;&gt;
          &lt;img src=&quot;assets/img/table.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot; style=&quot;height: 245px;&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title&quot;&gt;Book a table&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-2&quot;&gt;
        &lt;div class=&quot;card center&quot; style=&quot;width: 18rem; height: 90%;&quot;&gt;
          &lt;img src=&quot;assets/img/open.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot; style=&quot;height: 245px;&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title&quot;&gt;Open hours&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/main&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案1

得分: 3

以下是翻译好的部分:

如果您想要三列,使用列大小 4(12/3)。查看 grid 文档 以查看列类应该从移动(最小)开始,即使只是为了习惯和可读性,您不需要在相同数量上重复断点。例如,col-lg-4 col-md-4 col-sm-2 应该只是 col-sm-2 col-md-4

然后,不要使用内联样式。它们会导致重复,使您的代码更难维护。在 Bootstrap 已经提供类的地方使用自定义样式,比如我在容器元素上使用的内边距类

最后,对于 body 元素的边距实际上不起作用,因为 body 通常与视口的大小相同,因此边距将位于视口的_外部_。在 body 上使用内边距,或者在内部元素上使用边距。

以下是代码部分:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
body {
  background-color: #EDEFEE;
  font-family: 'Markazi Text', serif;
}

.container {
  background-color: lightpink;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

<!-- language: lang-html -->
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

<main>
  <div class="container pt-3 pt-md-0">
    <div class="row">
      <div class="col-4 col-md-3">
        <div class="card center">
          <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
          <div class="card-body">
            <h2 class="card-title bg-warning text-danger">Ragout de pomme de terre<span class="badge bg-primary">New</span></h2>
            <p class="card-text">Potato cooked with beef and carrot.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="col-4 col-md-3">
        <div class="card center">
          <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
          <div class="card-body">
            <h2 class="card-title">Book a table</h2>
            <p class="card-text">Potato cooked with beef and carrot.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="col-4 col-md-3">
        <div class="card center">
          <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
          <div class="card-body">
            <h2 class="card-title">Open hours</h2>
            <p class="card-text">Potato cooked with beef and carrot.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<!-- end snippet -->
英文:

If you want three columns, use column size 4 (12/3). Review the grid docs to see that column classes should be mobile (smallest) first, if only for convention and readability, and you don't need to repeat breakpoints with the same quantity. For example, col-lg-4 col-md-4 col-sm-2 should just be col-sm-2 col-md-4.

Then, don't use inline styles. They cause much repetition and make your code much harder to maintain. Use custom styles where Bootstrap doesn't already offer classes, such as the padding classes I'm using on the container element.

Finally, margin on the body element doesn't really work as the body is generally the size of the viewport, so margin would be outside the viewport. Use padding on the body or margin on inner elements.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background-color: #EDEFEE;
  font-family: &#39;Markazi Text&#39;, serif;
}

.container {
  background-color: lightpink;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

<!-- language: lang-html -->

&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot;&gt;

&lt;main&gt;
  &lt;div class=&quot;container pt-3 pt-md-0&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-4 col-md-3&quot;&gt;
        &lt;div class=&quot;card center&quot;&gt;
          &lt;img src=&quot;https://via.placeholder.com/400x200&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title bg-warning text-danger&quot;&gt;Ragout de pomme de terre&lt;span class=&quot;badge bg-primary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-4 col-md-3&quot;&gt;
        &lt;div class=&quot;card center&quot;&gt;
          &lt;img src=&quot;https://via.placeholder.com/400x200&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title&quot;&gt;Book a table&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col-4 col-md-3&quot;&gt;
        &lt;div class=&quot;card center&quot;&gt;
          &lt;img src=&quot;https://via.placeholder.com/400x200&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title&quot;&gt;Open hours&lt;/h2&gt;
            &lt;p class=&quot;card-text&quot;&gt;Potato cooked with beef and carrot.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/main&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案2

得分: 0

因为您正在使用 &quot;col-sm-2&quot; 来表示卡片,这意味着它将显示1/6,表示在小屏幕上会显示6张卡片?这是您想要的吗?
如果您想在小屏幕上显示两张或一张卡片,可以将类设置为 class=&quot;col-lg-4 col-md-4 col-sm-10&quot;class=&quot;col-lg-4 col-md-4 col-sm-6&quot;,然后可以相应地进行调整。

英文:

because you are using &quot;col-sm-2&quot; for the cards which mean it will show 1/6 which indicates it will show 6 cards on small screen? is that what you want?
make the class like that class=&quot;col-lg-4 col-md-4 col-sm-10&quot; or class=&quot;col-lg-4 col-md-4 col-sm-6&quot; if you want to show two or one card in small screens then you can adjust it accordingly

huangapple
  • 本文由 发表于 2023年3月21日 02:58:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/75794260.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定