css - bootstrap col 跳出容器

Question

我正在使用 AngularJS 开发单页应用程序。我使用 yeoman 的 Angular 生成器构建我的元素，我使用的是 bootstrap-sass-official 和 compass。

我有一些 Angular ng-repeat 生成的内容，我将其放置在 Bootstrap 的 col-xs-4 div 中。一行中有三个 div，第三个(包含电话号码的)超出了容器的边缘。我不知道为什么会这样，也不知道如何解决。

我的 html:

<div class="panel-heading">kontakt</div>
<div class="panel-content contact">
    <div class="container" ng-repeat="contact in contacts">
        <div class="col-xs-4">
            <p class="name-text">{{ contact.name }}</p>
        </div>
        <div class="col-xs-4">
            <p class="email-text">
                <a href="mailto:{{ contact.email }}">
                    <span class="glyphicon glyphicon-envelope email-icon"></span>
                    <span class="email-sign">{{contact.email}}</span>
                </a>
            </p>
        </div>
        <div class="col-xs-4">
            <p class="phone-text">
                <span class="glyphicon glyphicon-phone-alt phone-icon"></span>
                <span class="phone-sign">{{ contact.phone }}</span>
            </p>
        </div>
    </div>
</div>

我的CSS:

/********************************
PANELS
********************************/
.panel-heading {
    background-color: $secondary-color;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
    margin: 0;
    padding: 0.5em;
    @include breakpoint(desktop) {
        border-radius: 10px;
    }
}
.panel-content {
    background-color: #fff;
    margin: 0 2.5%;
    padding: 1em 0;
    font-size: 1.2em;

    /********************************
    SPECIFIC PANELS STYLES-LOCATION
    ********************************/
    &.location {
        p {
            text-align: center;
            margin: 0 0 1em 0;
        }
        .map-container {
            background-color: red;
            margin: 0 auto;
            width: 80%;
            height: 10em;
            @include breakpoint(tablet) {
                height: 15em;
            }
            @include breakpoint(desktop) {
                height: 20em;
            }

        }
    }
    /********************************
    SPECIFIC PANELS STYLES-CONTACT
    ********************************/
    &.contact {
        p {
            margin: 0;
            padding: 0;
            &.email-text {
                margin: 0 auto;
            }
        }
        .phone-text {
                text-align: right;
            }
        .email-sign, .phone-sign {
            font-size: 0.7em;
            @include breakpoint(tablet) {
                font-size: 1em;
            }
        }
        .email-icon, .phone-icon {
            color: #fff;
            background-color: $secondary-color;
            padding: 0.5em;
            border-radius: 90px;
        }
    }
    /********************************
    SPECIFIC PANELS STYLES-HOURS
    ********************************/
    &.delovni-cas {
        text-align: center;
    }
}

我的 Controller :

'use strict';

angular.module('angularApp')
    .controller('LandingController', function ($scope) {

        $scope.contacts = [
            {
                name: 'informacije:',
                email: 'knjiznica@ijs.si',
                phone: '+386 01 4773 304'
            },
            {
                name: 'izposoja:',
                email: 'ill@ijs.si',
                phone: '+386 01 4773 304'
            },
            {
                name: 'bibliografije:',
                email: 'branka.strancar@ijs.si',
                phone: '+386 01 4773 247'
            },
            {
                name: 'vodja knjižnice:',
                email: 'luka.sustersic@ijs.si',
                phone: '+386 01 4773 258'
            }
        ];
    });

我尽量缩小了范围。如果您需要更多信息，here is a github repo元素(相关文件在app文件夹下，views下有landing.html，styles下有_landing.scss。

Answer 1

您需要将 col 包裹在 row 中。

<div class="panel-heading">kontakt</div>
<div class="panel-content contact">
    <div class="container" ng-repeat="contact in contacts">
        <div class="row">
            <div class="col-xs-4">
                <p class="name-text">{{ contact.name }}</p>
            </div>
            <div class="col-xs-4">
                <p class="email-text">
                    <a href="mailto:{{ contact.email }}">
                        <span class="glyphicon glyphicon-envelope email-icon"></span>
                        <span class="email-sign">{{contact.email}}</span>
                    </a>
                </p>
            </div>
            <div class="col-xs-4">
                <p class="phone-text">
                    <span class="glyphicon glyphicon-phone-alt phone-icon"></span>
                    <span class="phone-sign">{{ contact.phone }}</span>
                </p>
            </div>
        </div>
    </div>
</div>