链接和按钮在引导网格中的小屏幕和超小屏幕上不起作用
Posted
技术标签:
【中文标题】链接和按钮在引导网格中的小屏幕和超小屏幕上不起作用【英文标题】：Links and buttons don't work on small and extra small screens in bootstrap grid 【发布时间】：2017-02-12 16:28:00 【问题描述】：我创建了一个视图，它在中型和大屏幕上显示 2 列，但在小屏幕和超小屏幕上仅显示 1 列。我正在使用引导程序中的推拉类来重新排列不同屏幕尺寸的面板。
我的问题是，在小屏幕和超小屏幕上，我的一些链接和按钮无法点击。
我关注了这个帖子Links in bootstrap grid stop working in small screen mode。它说问题在于链接是浮动的，导致父容器的高度为 0。
我尝试过使用“clearfix”类。我还使用 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>
谢谢
杰森
【问题讨论】：
【参考方案1】：我没有仔细阅读您的整个代码，但我认为这就是问题所在。例如，如果您有需要展示的情况 使用引导程序在不同屏幕尺寸上的不同列数，请具体说明所有列大小。不要让引导程序猜测。 这就是我的意思： 例如你有这个代码：
<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>
您可以看到您为超小屏幕指定了以下内容：“col-xs-4”和“col-xs-8”分别用于第一个和第二个 div。什么 关于第三个div？您暗示它是“col-xs-12”。恐怕你必须明确地说它是“col-xs-12”。
因此，如果您要将代码更改为：
<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>
它将毫无问题地工作。注意最后一个 div 的显式“col-xs-12”。问题是在超小屏幕上，第一个和第二个 div 向左浮动，因为它们有“col-xs-...”，而第三个 div 没有浮动并最终导致混乱！
玩得开心！
【讨论】：
非常感谢梅达德！这解决了我的问题。以上是关于链接和按钮在引导网格中的小屏幕和超小屏幕上不起作用的主要内容，如果未能解决你的问题，请参考以下文章