我正在使用 bootstrap 3 在网站中显示用户的联系方式。
我认为使用 bootstrap css 类 col-md-4 允许每行 3 个联系人详细信息会正确显示联系人详细信息,但我错了,因为显示不是我想要的预期。
我已经编写了 html 代码,以便只显示输入的联系方式。用户可以输入 1 到 6 个联系方式。每行最多显示三个联系人详细信息(使用 bootstrap css 类 col-md-4)。
当用户输入 3 个联系人详细信息时,显示如下(这是我需要的):
但是,当用户输入第 4 个联系人详细信息时,第 4 个联系人详细信息位于第 3 个联系人详细信息下方,但应放在第 1 个联系人详细信息下方。这是错误的可视化显示:
我确定这是我犯的一个简单错误,但我无法修复它。我已经搜索过 SO 和 Google,但找不到解决方案,所以我发布了这个帖子以了解如何解决这个问题。
这是我的 html 代码:
<div class="live_preview_standard_nac_contactContainer" dir="ltr" style="direction: ltr;">
<div class="row">
{{ #if contact_details_phone }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-phone icon_size20 icon_padding"></i>{{ contact_details_phone }}
</div>
{{ /if }}
{{ #if contact_details_mobile_phone }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-tablet icon_size24 icon_padding"></i>{{ contact_details_mobile_phone }}
</div>
{{ /if }}
{{ #if contact_details_email_address }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-envelope icon_size20 icon_padding"></i>{{ contact_details_email_address }}
</div>
{{ /if }}
{{ #if contact_details_linkedin_address }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-linkedin icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_linkedin_address }}</span>
</div>
{{ /if }}
{{ #if contact_details_facebook_address }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-facebook icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_facebook_address }}</span>
</div>
{{ /if }}
{{ #if contact_details_twitter_address }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-twitter icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_twitter_address }}</span>
</div>
{{ /if }}
</div>
</div>
这是我的 CSS 代码:
.live_preview_standard_nac_contactContainer {
padding-bottom: 1px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon_size20 {
font-size: 20px !important;
}
.icon_size24 {
font-size: 24px !important;
}
.icon_padding {
padding-right: 6px;
}
最佳答案
来源:>link<
So, to create the layout you want, create a container (). Next, create a row (). Then, add the desired number of columns (tags with appropriate .col-- classes). Note that numbers in .col-- should always add up to 12 for each row.
HTML 示例:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
关于html - 显示一系列 div - 每行 3 个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31848990/