我的主页上有三个.well项目,我不想在内容中填写内容,以确保它们在每个屏幕上都能正确显示.理想情况下,我想要一个CSS解决方案,可以指定它们的高度和宽度相互匹配,无论它们显示在哪个屏幕上(以及它们在窗口缩小时正确堆叠).
/* CSS used here will be applied after bootstrap.css */ #benefit-Box-1 { padding-top: 1em; display: inline-block; text-align: center; float: left; } #benefit-Box { padding-top: 1em; display: inline-block; text-align: center; float: left; } #benefit-Box-3 { padding-top: 1em; display: inline-block; text-align: center; float: left; } #benefit-row-2 { margin-top: 1px; } .icon-div { display:inline-block; text-align: centre; vertical-align: bottom; width: 100%; height: 100%; } .icon-div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row" id="benefit-row"> <div class="col-md-4" id="benefit-Box-1"> <div class="well"> <div class="icon-div"> <i class="fa fa-users fa-4x"></i> <h1>Collaborate in your sales meetings.</h1> </div> </div> </div> <div class="col-md-4" id="benefit-Box"> <div class="well"> <div class="icon-div"> <i class="fa fa-map-signs fa-4x"></i> <h1>Direct your team to the best deals</h1> </div> </div> </div> <div class="col-md-4" id="benefit-Box-3"> <div class="well"> <div class="icon-div"> <i class="fa fa-filter fa-4x"></i> <h1>Trust your pipeline forecast</h1> </div> </div> </div> </div> <div class="row" id="benefit-row-2"> <div class="col-md-4" id="benefit-Box-1"> <div class="well"> <div class="icon-div"> <i class="fa fa-bullseye fa-4x"></i> <h1>Helps you target the right contacts</h1> </div> </div> </div> <div class="col-md-4" id="benefit-Box"> <div class="well"> <div class="icon-div"> <i class="fa fa-graduation-cap fa-4x"></i> <h1>In-built sales training</h1> </div> </div> </div> <div class="col-md-4" id="benefit-Box-3"> <div class="well"> <div class="icon-div"> <i class="fa fa-line-chart fa-4x"></i> <h1>Smash your sales targets</h1> </div> </div> </div> </div> </div>
我在这里做了一个bootply:My attempts
解决方法
我设法通过删除井/引导程序标准响应行为并使用Flex方法采用我自己的一些来解决这个问题.如果有人对此感兴趣,那就是bootply:
Flex CSS classes to make responsive pages
我使用了目前的信息here来实现这一目标 – 我的盒子上的标准行为是在大型设备上占据屏幕宽度的33%,在中型设备上占50%,在小型设备上占100%.有魅力.
据我所知,它不会对旧版浏览器非常有用(我并不特别关心我的项目),但在现代浏览器上,它的运行方式与计划相符.