Question

我正在使用bootstrap 3来显示网站中用户的联系方式。

我认为使用bootstrap css类 col-md-4 允许每行3个联系人详细信息会正确显示联系人详细信息，但我错了，因为显示不是我的预料到的。

我编写了html代码，只显示输入的联系人详细信息。用户可以输入1到6个联系人详细信息。每行最多显示三个联系人详细信息（使用bootstrap css class col-md-4）。

当用户输入3个联系方式时，显示如下（这是我要求的）：

但是，当用户输入第4个联系人详细信息时，第4个联系人详细信息将放在第3个联系人详细信息下，但应放在第1个联系人详细信息下。以下是错误的可视化显示：

我确信这是我犯过的一个简单错误，但我无法修复它。我搜索了SO＆amp;谷歌，但找不到解决方案，所以我发布了这个帖子，以了解我如何解决这个问题。

这是我的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<

因此，要创建所需的布局，请创建一个容器（）。接下来，创建一个行（）。然后加所需的列数（具有适当的.col- - 的标签类）。请注意，.col- - 中的数字应始终最多为12 每一行。

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>

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

1 个答案: