Html 无法在引导模式全屏中将页脚保持在底部
我试图将引导模式的页脚保持到底,但我不能,这是我的html结构:Html 无法在引导模式全屏中将页脚保持在底部,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图将引导模式的页脚保持到底,但我不能,这是我的html结构: <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myM
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我创建了一个JSFIDLE来解释这种情况:
及
将此行添加到模式页脚中 默认情况下,模态内容具有相对位置。我用过!对于css在类模式对话框上的否决非常重要。如果您有separet css文件,那么您不需要使用!重要的。
.modal对话框{
宽度:100%!重要;
身高:100%;
保证金:0自动!重要;
填充:20px 20px;
}
.模态内容{
身高:100%;
边界半径:0;
}
.模态页脚{
位置:绝对位置;
底部:0;
宽度:100%;
}
启动演示模式
&时代;
情态标题
...
接近
保存更改
您可以使用底部0px为模型内容提供相对位置和模式页脚绝对位置
试一试
.modal-content {
height: 100%;
border-radius: 0;
position:relative;
}
.modal-footer {
border-radius: 0;
bottom:0px;
position:absolute;
width:100%;
}
小提琴:一切都很好,我的朋友
.modal对话框{
宽度:100%;
身高:100%;
填充:0;
}
.模态内容{
身高:100%;
边界半径:0;
}
.模态页脚{
位置:绝对位置;
底部:0;
宽度:100%;
}
启动演示模式
&时代;
情态标题
...
接近
保存更改
在桌面上工作而不是在手机上工作,会产生奇怪的效果。你能在智能手机上试试吗?在我的Nexus设备上的chrome浏览器上看起来不错,你在检查哪部手机?我也在Nexus 5上,看起来不错,你能分享一个屏幕截图吗?工作正常,我错过了一个标签,谢谢。附:好的电话选择:P@AgainMe我没发现任何问题,它在我这边起作用。
.modal-content {
height: 100%;
border-radius: 0;
position:relative;
}
.modal-footer {
border-radius: 0;
bottom:0px;
position:absolute;
width:100%;
}