css 在断点处删除Bootstrap 5浮点类(float-sm-start / float-sm-end)时，显示图形/img 100宽度

我正在将HTML文件更新为Bootstrap版本5.2.3。
在当前版本中（4.6.2.）我使用float类left和right来定位文本在两边换行的图像。我还让图形在断点之前占据40%的水平屏幕空间。这防止了文本在断点之前换行图像变得非常窄。我还在图形和换行文本之间留了一些边距。我使用以下CSS完成了这一点：

figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 0;
}

figure.float-left {
  margin-right: 1.25rem;
}

figure.float-right {
  margin-left: 1.25rem;
}

.float-left {
  float: left;
  width: 40%;
}

.float-right {
  float: right;
  width: 40%;
}

figure figcaption {
  text-align: left;
}

/*== Remove float classes on medium devices and smaller ==*/
@media only screen and (max-width: 575.98px) {

  .float-left,
  .float-right {
    float: none;
    width: 100%;
  }
}

在断点下方，图形以全宽度显示，并删除了其各自的左边距或右边距。
我也想在我的页面的Bootstrap 5.2.3版本中完成这一点，为此我使用了float-sm-start和float-sm-end类。
如果没有额外的CSS，图形和换行文本之间就没有边距。此外，如果我减小屏幕大小，换行文本在断点之前会变得非常窄，如图1.

所示。图形也不会占用40%的水平屏幕空间。
我可以使用以下CSS重新创建我想要的内容：

figure.float-sm-start {
  margin-right: 1.25rem;
}

figure.float-sm-end {
  margin-left: 1.25rem;
}

.float-sm-start{
  float: left;
  width: 40%;
}

.float-sm-end {
  float: right;
  width: 40%;
}

/*== Remove float classes on small screen sizes devices and smaller ==*/
@media only screen and (max-width: 575.98px) {

  .float-sm-start,
  .float-sm-end {
    float: none;
    width: 100%;
    margin-left:0;
    margin-right:0
  }
}

这部分地完成了工作，防止了窄文本换行。但是，浮动端图形仍然有左边距，导致图形偏移定位，如图2

所示
有没有一种更优雅的方法可以通过使用特定的实用程序类来完成我想要的任务？或者我必须求助于CSS来完成这个任务吗？还有其他的浮点实用程序，比如float-md|lg|加大码|xxl-start/end？如果我想让它们也显示这种行为，我是否必须为它们单独添加CSS？
一个二个一个一个

尽管添加!important并不总是被描述为漂亮和干净，但添加它解决了我的问题。
我补充道

/*== Remove float classes on small screen sizes devices and smaller ==*/
@media only screen and (max-width: 575.98px) {

  .float-sm-start,
  .float-sm-end {
    float: none;
    width: 100%;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

现在两个浮点数（开始/结束）都在断点下删除了边距，使两个图的宽度都为100，没有边距。
x一个一个一个一个x一个一个二个x
一个三个三个一个

/*Floats*/

figure.float-sm-start {
  margin-right: 1.25rem;
}

figure.float-sm-end {
  margin-left: 1.25rem;
}

.float-sm-start{
  float: left;
  width: 40%;
}

.float-sm-end {
  float: right;
  width: 40%;
}

/*== Remove float classes on small screen sizes devices and smaller ==*/
@media only screen and (max-width: 575.98px) {

  .float-sm-start,
  .float-sm-end {
    float: none;
    width: 100%;
    margin-left:0;
    margin-right:0
  }
}

/* ===== Images ===== */
/* Set Images to Resize by Default */
img {
  max-width: 100%;
  height: auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<!--Start figure-->
<figure class="float-sm-start shadow p-2 me-4 mb-3">
  <div style="overflow:hidden">
    <img src="https://source.unsplash.com/collection/10720924/600x450" class="" alt="Natural landscape">
  </div>
  <figcaption><strong>Afbeelding x.</strong>&#32;A random landscape photograph from Jocelyn Traher's collection on
    <a href="https://unsplash.com/collections/10720924/landscape" target="_blank">Unsplash</a>
  </figcaption>
</figure>
<p>Floating image to the left with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image. </p>
<p>The <code>float</code> class (<code>float-sm-start</code>) starts on viewports sized SM (small) or wider (≥576px, small breakpoint). On smaller sreen sizes the image is positioned above the text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aufidio, praetorio, erudito homine, oculis capto, saepe audiebam, cum se lucis magis quam utilitatis desiderio moveri diceret. Videsne ut, quibus summa est in voluptate.</p>
<div class="clearfix"></div>
<!--End figure-->

<hr>

<!--Start figure-->
<figure class="float-sm-end shadow p-2 ms-4 mb-3">
  <div style="overflow:hidden">
    <img src="https://source.unsplash.com/collection/10720924/600x450" class="" alt="Natural landscape">
  </div>
  <figcaption><strong>Afbeelding x.</strong>&#32;A random landscape photograph from Jocelyn Traher's collection on
    <a href="https://unsplash.com/collections/10720924/landscape" target="_blank">Unsplash</a>
  </figcaption>
</figure>
<p>Floating image to the right with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image. </p>
<p>The <code>float</code> class (<code>float-sm-end</code>) starts on viewports sized SM (small) or wider (≥576px, small breakpoint). On smaller sreen sizes the image is positioned above the text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aufidio, praetorio, erudito homine, oculis capto, saepe audiebam, cum se lucis magis quam utilitatis desiderio moveri diceret. Videsne ut, quibus summa est in voluptate.</p>
<div class="clearfix"></div>
<!--End figure-->

<hr>

css 在断点处删除Bootstrap 5浮点类(float-sm-start / float-sm-end)时，显示图形/img 100宽度

1条答案

相关问题

热门标签

最新问答