html - 显示一系列 div - 每行 3 个 div

Question

我正在使用 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;
}

Answer 1

来源:>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>