我创建了一个视图，在中型和大型屏幕上显示2列，但在小屏幕和超小屏幕上只显示1列。我使用bootstrap中的push和pull类来重新排序不同屏幕尺寸的面板。
我的问题是，在小屏幕和超小屏幕尺寸上，我的某些链接和按钮无法点击。
我已经关注了这个帖子Links in bootstrap grid stop working in small screen mode。它说问题是链接浮动，导致父容器的高度为0。
我尝试过使用＆＃34; clearfix＆＃34;类。我还使用overflow：auto和另一个使用overflow：hidden创建了我自己的类，并且没有这些工作。
我之前从未遇到过这个问题，但这是我第一次使用推/拉。你会看看我的代码，看看你能否发现问题？
<div class="container">
<!--*********************************Modal for notes**********************************************************-->
<div class="modal fade" id="myModal" name="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Notes</h3>
</div>
<div class="modal-body">
<form method="post" action="/notes/save" role="form" name="new_note">
{!! csrf_field() !!}
<div class="form-group">
<label for="note">Type a new note for this client. (The current date will be automatically added.)</label>
<textarea class="form-control" rows="15" name="note" id="note" required></textarea>
<input type="hidden" name="ind_id" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Save Changes" onclick="this.form.timestamp.value=Date.now()">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<!--***********************************End modal code***********************************************************-->
<div class="row">
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--************************************Name and Address********************************************************-->
<div class="panel panel-primary">
<div class="panel-heading">Name and Address</div>
<div class="panel-body">
<address class="col-md-6">
<strong>{{ $ind->name }}</strong><br>
@if ($ind->MailingStreet)
{{ $ind->MailingStreet }}<br>
@endif
@if ($ind->MailingCity || $ind->MailingState || $ind->MailingPostalCode)
{{ $ind->MailingCity . ", " . $ind->MailingState . " " . $ind->MailingPostalCode }}
@endif
</address>
<address class="col-md-6">
@if ($ind->OtherStreet || $ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
<strong>Other Address</strong><br>
@endif
@if ($ind->OtherStreet)
{{ $ind->OtherStreet }}<br>
@endif
@if ($ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
{{ $ind->OtherCity . ", " . $ind->OtherState . " " . $ind->OtherPostalCode }}
@endif
</address>
</div>
</div>
<!--*******************************************End Name and Address***************************************-->
<!--*******************************************Contact Info***********************************************-->
<div class="panel panel-danger">
<div class="panel-heading">Contact Info</div>
<div class="panel-body">
@if ($ind->Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Cell_Phone }}</div>
@endif
@if ($ind->Spouse_Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Cell_Phone }}</div>
@endif
@if ($ind->Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Business_Phone }}</div>
@endif
@if ($ind->Spouse_Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Business_Phone }}</div>
@endif
@if ($ind->HomePhone)
<div class="col-md-5 col-sm-6"><strong>Home Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->HomePhone }}</div>
@endif
@if ($ind->Fax)
<div class="col-md-5 col-sm-6"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Fax }}</div>
@endif
@if ($ind->Email)
<div class="col-md-5 col-sm-6"><strong>Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Email }}</div>
@endif
@if ($ind->Spouse_Email)
<div class="col-md-5 col-sm-6"><strong>Spouse Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Email }}</div>
@endif
@if ($ind->Return_Type)
<div class="col-md-5 col-sm-6"><strong>Return Type</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Return_Type }}</div>
@endif
</div>
</div>
<!--*********************************************End Contact Info******************************************-->
</div>
<div class="col-sm-12 col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9 pull-right">
<!--*******************************************Options***********************************************************-->
<ul class="list-group">
<li class="list-group-item">
<a href="/individuals/edit/{{ $id }}" class="btn btn-warning btn-block no-print"><i class="fa fa-pencil-square-o"></i> Edit Client</a>
</li>
<li class="list-group-item">
<a href="/individuals/delete/{{ $id }}" class="btn btn-danger btn-block no-print" onclick="return confirm ('Are you sure you want to delete this client?')"><i class="fa fa-times"></i> Delete Client</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-success btn-block no-print" data-toggle="modal" data-target="#myModal"><i class="fa fa-sticky-note-o"></i> Add Note</button>
</li>
<!--********************Link Form*****************************************-->
<li class="list-group-item">
<form action="/links/save" method="post" class="form-inline">
{!! csrf_field() !!}
<div class="input-group btn-block">
<input id="autocomplete" type="text" class="form-control autocomplete no-print" name="client" placeholder="Add link..." required>
<input id="autocomplete-value" type="hidden" name="autocomplete-value" class="autocomplete-value">
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<span class="input-group-btn">
<button type="submit" class="btn btn-success no-print" style="height:36px;">Go</button>
</span>
</div>
</form>
</li>
<!--***********************End Link form*************************************-->
</ul>
<!--***************************************End Options*********************************************************-->
<!--************************************************Routing sheet starts here*********************************************************-->
@if(isset($routing_sheet))
<div class="panel panel-info" id="2015_routing_sheet">
<div class="panel-heading" role="tab" id="headingOne">2015 Tax Return</div>
<ul class="list-group">
@foreach($routing_sheet as $r)
<form action='/individuals/tax_return_2015' method='post'>
{!! csrf_field() !!}
@if($r->user_name)
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<div>
<button
type='submit'
class='btn btn-success btn-xs'
name='button'
value="Clear"
onclick="return confirm('Are you sure you want to clear this event?')">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
</div>
<div>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
</div>
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
@else
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<button
type='submit'
class='btn btn-danger btn-xs'
name='button'
value="Done"
onclick='this.form.timestamp.value=Date.now()'>
<i class="fa fa-square-o" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
@endif
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</form>
@endforeach
</ul>
</div>
@endif
<!--*********************************************Routing Sheet ends here***********************************************-->
</div>
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--*******************************************Links**********************************************************-->
<div class="panel panel-warning">
<div class="panel-heading">Links</div>
<ul class="list-group">
<!--******************Start of displaying links*****************-->
@if(count($links_ind))
@foreach($links_ind as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a
href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-8 col-sm-7">
<a href='/individuals/{{ $link->ind_id }}'>{{ $link->FirstName.' '.$link->LastName }}</a>
</div>
@if ($link->Business_Phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Business_Phone }}</div>
@endif
@if ($link->Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Cell_Phone }}</div>
@endif
@if ($link->Spouse_Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Spouse_Cell_Phone }}</div>
@endif
@if ($link->HomePhone)
<div class="col-md-4 col-sm-5"><strong>Home Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->HomePhone }}</div>
@endif
</div>
</div>
</li>
@endforeach
@endif
@if(count($links_bus))
@foreach($links_bus as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-7 col-sm-7">
<a href='/businesses/{{ $link->bus_bus_id }}'>{{ $link->company_name }}</a>
</div>
@if ($link->business_phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->business_phone }}</div>
@endif
@if ($link->cell_phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->cell_phone }}</div>
@endif
@if ($link->fax)
<div class="col-md-4 col-sm-5"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->fax }}</div>
@endif
@if ($link->email)
<div class="col-md-4 col-sm-5"><strong>Email</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->email }}</div>
@endif
</div>
</div>
</li>
@endforeach
@endif
</ul>
</div>
<!--*******************************************************End of displaying links*************************************************-->
<!--*****************************************start of displaying notes************************************************-->
<div class="panel panel-success">
<div class="panel-heading">Notes</div>
<ul class="list-group">
@if(count($notes))
<!--***********************************Modal for each note*******************************************-->
@foreach($notes as $note)
<div class='modal fade'
id='myModal{{ $note->id }}'
name='myModal{{ $note->id }}'
tabindex='-1'
role='dialog'
aria-labelledby='myModalLabel'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<h3 class='modal-title' id='myModalLabel'>Edit Note</h3>
</div>
<form method='post' action='/notes/save' role='form' name='new_note'>
{!! csrf_field() !!}
<div class='modal-body'>
<div class='form-group'>
<label for='note'>Edit the note and save your changes.</label>
<textarea class='form-control' rows='15' name='note' id='note' required>{{ $note->note }}</textarea>
<input type='hidden' name='ind_id' id='ind_id' value="{{ $id }}">
<input type='hidden' name='note_id' id='note_id' value="{{ $note->id }}">
<input type='hidden' name='timestamp' id='timestamp'>
</div>
</div>
<div class='modal-footer'>
<input type='submit' class='btn btn-primary' value='Save Changes' onclick='this.form.timestamp.value=Date.now()'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--*****************************************End Modal for each note****************************************-->
<li class="list-group-item">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12"><pre class="pre-note">{{ $note->note }}</pre></div>
</div>
</li>
@endforeach
@endif
</ul>
</div>
<!--******************************************end of displaying notes***************************************************-->
<!--*****************************************start of displaying invoices***********************************************
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Invoices</h3>
</div>
<div class="panel-body">
<ol>
@foreach($invoices as $invoice)
<li><a href='/invoice/pdf/{{ $invoice->id }}'>{{ date('m-d-Y', strtotime($invoice->date)) }}</a> {{ '$' . $invoice->amount }}</li>
@endforeach
</ol>
</div>
</div>
<!****************************************end of displaying invoices**************************************************-->
</div>
<script>
//This encodes the PHP array as JSON so that the autocomplete.js script can use it
var dataTwo = {!! $dataTwo !!};
</script>
</div>
</div>
谢谢
杰森
答案 0 :(得分：0)
我没有完成整个代码，但我认为这就是问题所在。例如，如果你有需要展示的情况 使用bootstrap在不同屏幕尺寸上使用不同数量的列，请具体说明所有列大小。不要让bootstrap猜测。 这就是我的意思： 例如，你有这个代码：
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12"><pre class="pre-note">{{ $note->note }}</pre></div>
您可以看到为超小屏幕指定了以下内容：＆＃34; col-xs-4＆＃34;和＆＃34; col-xs-8＆＃34;适用于第一和第二部门。什么 关于第三个div？你暗示它是＆＃34; col-xs-12＆＃34;。我恐怕你必须明确地说它是＆＃34; col-xs-12＆＃34;。
因此，如果您要将代码更改为：
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12"><pre class="pre-note">{{ $note->note }}</pre></div>
它没有任何问题。注意明确的＆＃34; col-xs-12＆＃34;为最后一个div。问题是在xtra小屏幕上，第一个和第二个div被浮动，因为它们有＆＃34; col-xs -...＆＃34;而第三个div没有漂浮，最终导致混乱！
玩得开心!!