我遇到了Bootstrap 3的问题,其中包含地址的col-xs-11被包裹在包含字体真棒图标的col-xs-1下面。它看起来像下图:
(请注意,该地址是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