如何修复引导程序相册网格系统的问题

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

How to fix problem with bootstrap album grid system

问题

以下是翻译好的部分：

<!--start-->
<div class="album py-5 bg-light">

    <span th:each="el:${base}">

        <div class="container">

            <div class="row">

                <div class="col-md-4">

                    <div class="card mb-4 shadow-lg">
                        <svg>
                            <image th:href="@{'/img/' + ${el.imgName}}" width="100%" height="100%"
                                   preserveAspectRatio="xMidYMid slice" th:alt="error"/>
                        </svg>
                        <div class="card-body">
                            <p th:text="${el.imgDesc}" class="card-text"></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                </div>
                                <small class="text-muted"></small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </span>
</div>
<!--finish-->

希望这对你有所帮助！如果有任何其他问题，请随时问我。

英文:

I am facing a problem with the Bootstrap-4 grid system.
I want to write for each and use one container and add elements from the database automatically.
When I use th:each loop, it brakes the Bootsytap grid system.
I want to be like this ...

如何修复引导程序相册网格系统的问题

but I receive this when I use the loop ...

如何修复引导程序相册网格系统的问题

This is my code:

<!--start-->
<div class="album py-5 bg-light">

&lt;span th:each=&quot;el:${base}&quot;&gt;

&lt;div class=&quot;container&quot;&gt;

            &lt;div class=&quot;row&quot;&gt;

                &lt;div class=&quot;col-md-4 &quot;&gt;

                &lt;div class=&quot;card mb-4 shadow-lg &quot;&gt;
                    &lt;svg&gt;
                        &lt;image th:href=&quot;@{&#39;/img/&#39; + ${el.imgName}}&quot; width=&quot;100%&quot; height=&quot;100%&quot;
                               preserveAspectRatio=&quot;xMidYMid slice&quot; th:alt=&quot;error&quot;/&gt;
                    &lt;/svg&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                        &lt;p th:text=&quot;${el.imgDesc}&quot; class=&quot;card-text&quot;&gt;&lt;/p&gt;
                        &lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
                            &lt;div class=&quot;btn-group&quot;&gt;
                                &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;small class=&quot;text-muted&quot;&gt;&lt;/small&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;/div&gt;

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

</div>
<!--finish-->

And this is the code of bootstrap grid:

 &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-sm&quot;&gt;
&lt;svg class=&quot;bd-placeholder-img card-img-top&quot; width=&quot;100%&quot; height=&quot;225&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot; aria-label=&quot;Placeholder: Thumbnail&quot;&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#55595c&quot;&gt;&lt;/rect&gt;&lt;text x=&quot;50%&quot; y=&quot;50%&quot; fill=&quot;#eceeef&quot; dy=&quot;.3em&quot;&gt;Thumbnail&lt;/text&gt;&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;Edit&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

答案1

得分: 0

你正在重复使用&lt;div class=&quot;row&quot;&gt;，这就是每个卡片显示在自己的行中的原因。相反地，你应该重复使用&lt;div class=&quot;col-md-4&quot;&gt;，以获得与你的Bootstrap示例中相同的HTML输出。所以你的代码可能如下所示：

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-4&quot; th:each=&quot;el:${base}&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-lg &quot;&gt;
&lt;svg&gt;
&lt;image th:href=&quot;@{&#39;/img/&#39; + ${el.imgName}}&quot; width=&quot;100%&quot; height=&quot;100%&quot;
preserveAspectRatio=&quot;xMidYMid slice&quot; th:alt=&quot;error&quot;/&gt;
&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p th:text=&quot;${el.imgDesc}&quot; class=&quot;card-text&quot;&gt;&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
英文:

You are repeating &lt;div class=&quot;row&quot;&gt; and this is why each card displayed in its own row. Instead, you should be repeating &lt;div class=&quot;col-md-4&quot;&gt; to get the same HTML output as in your Bootstrap example. So your code may look like ...

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-4&quot; th:each=&quot;el:${base}&quot;&gt;
&lt;div class=&quot;card mb-4 shadow-lg &quot;&gt;
&lt;svg&gt;
&lt;image th:href=&quot;@{&#39;/img/&#39; + ${el.imgName}}&quot; width=&quot;100%&quot; height=&quot;100%&quot;
preserveAspectRatio=&quot;xMidYMid slice&quot; th:alt=&quot;error&quot;/&gt;
&lt;/svg&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p th:text=&quot;${el.imgDesc}&quot; class=&quot;card-text&quot;&gt;&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot;&gt;View&lt;/button&gt;
&lt;/div&gt;
&lt;small class=&quot;text-muted&quot;&gt;&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2020年9月15日 00:40:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/63888510.html
  • java
  • spring
  • thymeleaf
匿名

发表评论

匿名网友

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

确定