javascript - 将一行中的 4 列居中对齐并响应
问题描述
我有 4 列我试图在一行中居中对齐,并让它们在使用 Bootstrap 4 移动时做出响应,但我在让它们正确对齐时遇到了一些问题。我希望列之间有一些空间,如下所示,但我也希望它们保持一行而不是堆叠。
这是我的代码:
.row-centered {
text-align:center;
display: inherit;
}
#businessDevTitle {
text-align: left;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
text-align: center;
background-color: #ccc;
border: 1px solid #ddd;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="ttr_main" class="row row-centered">
<h3 id="businessDevTitle">Business Development</h3>
<div class="col-md-3 col-centered">
<div class="col-*">
<img src="https://i.imgur.com/zDpdA1M.png" />
</div>
</div>
<div class="col-md-3 col-centered">
<div class="col-*">
<img src="https://i.imgur.com/1sjJ136.png" />
</div>
</div>
<div class="col-md-3 col-centered">
<div class="col-*">
<img src="https://i.imgur.com/jaIojmI.png" />
</div>
</div>
<div class="col-md-3 col-centered">
<div class="col-*">
<img src="https://i.imgur.com/CKd16El.png" />
</div>
</div>
</div>
解决方案
当您在这里使用引导程序时,我们将尝试通过引导程序提供的类来实现这一点,这样就需要更少的自定义 CSS。
按以下方式构建您的 HTML:
<div class="container-fluid">
<div id="ttr_main" class="row">
<h3 id="businessDevTitle">Business Development</h3>
<div class="col-xs-3">
<img src="https://i.imgur.com/zDpdA1M.png" class="img-responsive centered"/>
</div>
<div class="col-xs-3">
<img src="https://i.imgur.com/1sjJ136.png" class="img-responsive centered"/>
</div>
<div class="col-xs-3">
<img src="https://i.imgur.com/jaIojmI.png" class="img-responsive centered"/>
</div>
<div class="col-xs-3">
<img src="https://i.imgur.com/CKd16El.png" class="img-responsive centered"/>
</div>
</div>
</div>
并丢弃 csscol-centered
并row-centered
添加此类:
.centered {
margin-left: auto;
margin-right: auto;
}
推荐阅读
- java - Java KeyStore jceks.key.serialFilter 或 jdk.serialFilter 异常
- php - WordPress。如何在 taxonomy.php 页面中获取自定义 post_type 计数
- laravel-5 - SQLSTATE [42S22]:找不到列:1054“字段列表”中的未知列“名称”
- pdf - 使用 SQR 生成保存的 PDF 文档
- mongodb - 具有相同集合的 Mongo db 子查询
- pandas - pandas.plotting scatter_matrix 关于主对角线图的混淆
- c++ - 如何从 C++ 生成 UML 类图
- xml - “XSD 无效”但如何?
- mysql - 需要帮助编写 MySQL 查询(Alexamara Marina 数据库)
- javascript - 将任何短语与包含在双引号中的布尔(and,or,not)关键字匹配?(JS 正则表达式)