我想根据屏幕尺寸显示方框。问题是我无法将方形 div 中的内容居中,并且纵横比不佳。内容框的大小是固定的。
目标:
- case lg => 显示 6 个 div/行(6 列)=> col-lg-2;
- case md => 显示 5 个 div/行(5 列)=> col-md-5(自定义类女巫适用 20% with);
- case sm => 显示 3 个 div/行(3 列)=> col-sm-4;
- case xs => 显示 2 个 div/行(2 列)=> col-sm-6;
var app = angular.module('myApp',[]);
app.controller('MainCtrl',['$scope', function($scope){
$scope.test = 'Angular works !!';
$scope.data = [];
for(var i=0;i<50;i++){
$scope.data.push('item ' + i);
}
}]);
.square {
border: 5px solid red;
position: relative;
text-align: center;
/*width: 50%;*/
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 200px;
height: 200px;
border:solid blue 1px;
font-size: 2em;
top:0%;
left:0%;
padding-top: 0%;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media screen and (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media screen and (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media screen and (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<div class="container-fluid" ng-app="myApp" ng-controller="MainCtrl">
<div ng-repeat="items in data" class="square col-lg-2 col-md-15 col-sm-4 col-xs-6">
<div class="content">
Hello!
</div>
</div>
</div>
最佳答案
因为您知道 .content div 的高度和宽度,您可以使用 calc() 函数将其定位在中心。
.square {
border: 5px solid red;
text-align: center;
}
.content {
width: 200px;
height: 200px;
margin-top: 5%;
margin-bottom: 5%;
margin-left: calc(50% - 100px);
border:solid blue 1px;
font-size: 2em;
}
fiddle :https://jsfiddle.net/4cun1aex/
关于javascript - 如何将正方形 div 中的内容居中并使用 bootstrap.css 保持纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36885180/