Col-xs-1旁边的Col-xs-11正在换行到下一行

时间:2016-01-16 22:28:11

标签: css twitter-bootstrap laravel blade

我遇到了Bootstrap 3的问题,其中包含地址的col-xs-11被包裹在包含字体真棒图标的col-xs-1下面。它看起来像下图:

enter image description here

(请注意,该地址是faker生成的地址。不是真正的地址:))

如果我将地址div的类从col-xs-11更改为col-xs-10,它看起来很好,但后来我丢失了地址一侧的额外空间。

奇怪的是,如果我从col-xs-1 div中删除字体非常棒的字符,那么对齐是完美的,正如预期的那样。但是一旦我添加了角色或任何角色,地址就会再次包裹在col-xs-1下面。

我已经从下面的Blade模板中附加了代码。有没有人对为什么会发生这种情况有任何想法?

@foreach ($addresses as $key => $address)
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-user"></i> <strong class="panel-title">{{ $address->name }}</strong><br>
            </div>
            <div class="panel-body">
                <address>
                    <div class="row">
                        <div class="col-xs-1">
                            <i class="fa fa-globe"></i>
                        </div>
                        <div class="col-xs-11">
                            {{ $address->address1 }}<br>
                            @if ($address->address2)
                                {{ $address->address2 }}<br>
                            @endif
                            {{ $address->city }}, {{ $address->state }} {{ $address->postal_code }}<br>
                            {{ $address->country }}<br><br>
                        </div>
                    </div>
                    @if ($address->email)
                        <i class="fa fa-envelope-o" title="Email"></i> {{ $address->email }}<br>
                    @endif
                    @if ($address->phone)
                        <i class="fa fa-phone" title="Phone"></i> {{ $address->phone }}
                    @endif
                </address>

                <a role="button" class="btn btn-sm btn-default" href={{ url("user/address/{$address->id}/edit") }}>Edit</a>
                {!! Form::open(['url' => "user/address/{$address->id}", 'method' => 'delete', 'style' => 'display: inline-block;']) !!}
                {!! Form::submit('Delete', ['name' => 'delete', 'class' => 'btn btn-sm btn-danger']) !!}
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    @include ('address.index.pagination-clearfix')

@endforeach

0 个答案:

没有答案