Question

我正在使用AngularJS处理单页应用。我使用自耕农的角度生成器搭建我的项目，我使用bootstrap-sass-official和compass。

我有一些角色ng-repeat生成的内容，我放在bootstrap的col-xs-4 div中。一行中有三个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;
    }
}

我的控制员：

'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项目（相关文件位于应用程序文件夹中，位于其中的landing.html以及样式_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>

bootstrap col跳出容器

1 个答案: