个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我创建了一个 View ，该 View 在中型和大型屏幕上显示 2 列，但在小屏幕和超小屏幕上仅显示 1 列。我正在使用 bootstrap 中的推送和拉取类在不同的屏幕尺寸下重新排列我的面板。
我的问题是在小屏幕和超小屏幕上我的一些链接和按钮不可点击。
我已关注此主题 Links in bootstrap grid stop working in small screen mode .它说问题是链接是 float 的，导致父容器的高度为 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>
谢谢
杰森
最佳答案
我没有仔细阅读您的全部代码，但我认为这是问题所在。例如，如果您有需要展示的情况 使用 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>
您可以看到您已经为超小屏幕指定了以下内容:第一个和第二个 div 分别为“col-xs-4”和“col-xs-8”。什么 关于第三个分区？您已经暗示它是“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”。问题是在 xtra 小屏幕上，第一个和第二个 div 向左浮动，因为它们有“col-xs-...”，而第三个 div 没有 float ，最终导致困惑!
玩得开心!!
关于php - 链接和按钮在引导网格中的小屏幕和超小屏幕上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39853426/
24
4
0
我在 JavaScript 文件中运行 PHP，例如...... var = '';). 我需要使用 JavaScript 来扫描字符串中的 PHP 定界符(打开和关闭 PHP 的 )。 我已经知道使
我希望能够做这样的事情: php --determine-oldest-supported-php-version test.php 并得到这个输出: 7.2 也就是说，php 二进制检查 test.
我正在开发一个目前不使用任何框架的大型 php 站点。我的大问题是，随着时间的推移慢慢尝试将框架融入应用程序是否可取，例如在创建的新部件和更新的旧部件中？ 比如所有的页面都是直接通过url服务的，有几
下面是我的源代码，我想在同一页面顶部的另一个 php 脚本中使用位于底部 php 脚本的变量 $r1。我需要一个简单的解决方案来解决这个问题。我想在代码中存在的更新查询中使用该变量。 $name)
我正在制作一个网站，根据不同的情况进行大量 PHP 重定向。就像这样...... header("Location: somesite.com/redirectedpage.php"); 为了安全起见
我有一个旧网站，我的 php 标签从 因为短标签已经显示出安全问题，并且在未来的版本中将不被支持。 关于php - 如何避免在 php 文件中写入
我有一个用 PHP 编写的配置文件，如下所示， 所以我想用PHP开发一个接口(interface)，它可以编辑文件值，如$WEBPATH , $ACCOUNTPATH和 const值(value)观
我试图制作一个登录页面来学习基本的PHP，首先我希望我的独立PHP文件存储HTML文件的输入(带有表单)，但是当我按下按钮时(触发POST到PHP脚本) )我一直收到令人不愉快的错误。 我已经搜索了S
我正在寻找一种让 PHP 以一种形式打印任意数组的方法，我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the max key size for an array in PHP? 正如标题所说，我想知道
我正在寻找一种让 PHP 以一种形式打印任意数组的方法，我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我在 MySQL 数据库中有一个表，其中存储餐厅在每个工作日和时段提供的菜单。 表结构如下: i_type i_name i_cost i_day i_start i_
我有两页。 test1.php 和 test2.php。 我想做的就是在 test1.php 上点击提交，并将 test2.php 显示在 div 中。这实际上工作正常，但我需要向 test2.php
我得到了这个代码。我想通过textarea更新mysql。我在textarea中回显我的MySQL，但我不知道如何更新它，我应该把所有东西都放进去吗，因为_GET模式没有给我任何东西，我也尝试_GET
首先，我是 php 的新手，所以我仍在努力学习。我在 Wordpress 上创建了一个表单，我想将值插入一个表(data_test 表，我已经管理了)，然后从 data_test 表中获取所有列(id
我有以下函数可以清理用户或网址的输入: function SanitizeString($var) { $var=stripslashes($var); $va
我有一个 html 页面，它使用 php 文件查询数据库，然后让用户登录，否则拒绝访问。我遇到的问题是它只是重定向到 php 文件的 url，并且从不对发生的事情提供反馈。这是我第一次使用 html、
我有一个页面充满了指向 pdf 的链接，我想跟踪哪些链接被单击。我以为我可以做如下的事情，但遇到了问题: query($sql); if($result){
我正在使用 从外部文本文件加载 HTML/PHP 代码 $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $l
我是一名优秀的程序员,十分优秀！