如何在这个Bootstrap网站上添加徽章？

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

How can I add a badge to this Bootstrap website?

问题

我正在尝试学习前端。我从一个Bootstrap项目开始，但我卡在了这个问题上。我想要像我做的设计中那样添加徽章。尽管我尝试添加它，但对齐方式不正确，网站乱了。有人可以试一下吗？

<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
    <div class="list-group">
        <label class="list-group-item d-flex gap-3">
            <span class="pt-1 form-checked-content">
                <strong>Title</strong>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#calendar-event"></use></svg>
                    23 July
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#alarm"></use></svg>
                    17:00
                </small>
                <small class="d-block text-body-secondary">
                    <svg class="bi me-1" height="1em" width="1em"><use xlink:href="#geo-alt"></use></svg>
                    1.5 km
                    <svg class="bi me-1" height="1em" style="margin-left: 10px;" width="1em"><use
                            xlink:href="#car"></use></svg>
                    19 min
                </small>
            </span>
            <button class="btn btn-secondary position-absolute top-50 translate-middle text-body-secondary"
                    style="right: 0; background: none; border-color: #00000059;" type="button">
                <svg class="bi m-1" height="1em" width="1em">
                    <use xlink:href="#edit"></use>
                </svg>
            </button>
        </label>
    </div>
</div>

如何在这个Bootstrap网站上添加徽章？

我已经尝试过的事情：

我尝试添加按钮并对其进行样式设置，但结果不如我预期的那样。它被添加到了标签中，所以所有文本都向右移动，就像是水平网格一样。

英文:

I'm trying to learn front-end. I'm starting with a project in Bootstrap, but I'm stuck on this issue. I want to add badges like in this design I made. Although if I try to add it, the alignment is incorrect and the site is messed up. Can somebody give it a shot?

&lt;div class=&quot;d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center&quot;&gt;
    &lt;div class=&quot;list-group&quot;&gt;
        &lt;label class=&quot;list-group-item d-flex gap-3&quot;&gt;
            &lt;span class=&quot;pt-1 form-checked-content&quot;&gt;
                &lt;strong&gt;Title&lt;/strong&gt;
                &lt;small class=&quot;d-block text-body-secondary&quot;&gt;
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;&lt;use xlink:href=&quot;#calendar-event&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    23 July
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; style=&quot;margin-left: 10px;&quot; width=&quot;1em&quot;&gt;&lt;use
                            xlink:href=&quot;#alarm&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    17:00
                &lt;/small&gt;
                &lt;small class=&quot;d-block text-body-secondary&quot;&gt;
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;&lt;use xlink:href=&quot;#geo-alt&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    1,5 km
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; style=&quot;margin-left: 10px;&quot; width=&quot;1em&quot;&gt;&lt;use
                            xlink:href=&quot;#car&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    19 min
                &lt;/small&gt;
            &lt;/span&gt;
            &lt;button class=&quot;btn btn-secondary position-absolute top-50 translate-middle text-body-secondary&quot;
                    style=&quot;right: 0; background: none; border-color: #00000059;&quot; type=&quot;button&quot;&gt;
                &lt;svg class=&quot;bi m-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;
                    &lt;use xlink:href=&quot;#edit&quot;&gt;&lt;/use&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;

如何在这个Bootstrap网站上添加徽章？

What I've already tried:

I tried to add buttons and style them, but the result wasn't what I was expecting. It was added into the label so all of the text was shifted to the right like it was a horizontal grid.

答案1

得分: 1

我在标签上添加了flex-wrap类，以便新的flex项目可以换行，然后添加了一个具有flex-basis为100%的新div，以便占据整行，然后在其中添加了徽章。此外，为了对齐顶部内容，我在span上添加了一些边距。

英文:

I added the class flex-wrap to the label so that new flex items can wrap and then added a new div with the flex-basis for 100% so that it takes the whole row and then added the badges inside of it. And also for the alignment of the top contents I added some margin to the span.

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

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

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;div class=&quot;d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center&quot;&gt;
    &lt;div class=&quot;list-group&quot;&gt;
        &lt;label class=&quot;list-group-item d-flex flex-wrap gap-3&quot;&gt;
            &lt;span class=&quot;pt-1 form-checked-content mt-3&quot;&gt;
                &lt;strong&gt;Title&lt;/strong&gt;
                &lt;small class=&quot;d-block text-body-secondary&quot;&gt;
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;&lt;use xlink:href=&quot;#calendar-event&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    23 July
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; style=&quot;margin-left: 10px;&quot; width=&quot;1em&quot;&gt;&lt;use
                            xlink:href=&quot;#alarm&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    17:00
                &lt;/small&gt;
                &lt;small class=&quot;d-block text-body-secondary&quot;&gt;
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;&lt;use xlink:href=&quot;#geo-alt&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    1,5 km
                    &lt;svg class=&quot;bi me-1&quot; height=&quot;1em&quot; style=&quot;margin-left: 10px;&quot; width=&quot;1em&quot;&gt;&lt;use
                            xlink:href=&quot;#car&quot;&gt;&lt;/use&gt;&lt;/svg&gt;
                    19 min
                &lt;/small&gt;
            &lt;/span&gt;
            &lt;button class=&quot;btn btn-secondary position-absolute top-50 translate-middle text-body-secondary&quot;
                    style=&quot;right: 0; background: none; border-color: #00000059;&quot; type=&quot;button&quot;&gt;
                &lt;svg class=&quot;bi m-1&quot; height=&quot;1em&quot; width=&quot;1em&quot;&gt;
                    &lt;use xlink:href=&quot;#edit&quot;&gt;&lt;/use&gt;
                &lt;/svg&gt;
            &lt;/button&gt;

            &lt;div style=&quot;flex-basis: 100%;&quot;&gt;
                &lt;div class=&quot;d-inline-block rounded-circle bg-danger text-center&quot; style=&quot;width: 25px; height: 25px;&quot;&gt;S&lt;/div&gt;
                &lt;div class=&quot;d-inline-block rounded-circle bg-success text-center&quot; style=&quot;width: 25px; height: 25px;&quot;&gt;A&lt;/div&gt;
                &lt;div class=&quot;d-inline-block rounded-circle bg-primary text-center&quot; style=&quot;width: 25px; height: 25px;&quot;&gt;E&lt;/div&gt;
            &lt;/div&gt;            
            
        &lt;/label&gt;

    &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 18:53:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875049.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

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

确定