时间戳

首页 > 解决方案 > Boostrap 4 - 在 1 行/2 列中打包和居中某些内容的最佳方式

bootstrap-4 - Boostrap 4 - 在 1 行/2 列中打包和居中某些内容的最佳方式

问题描述

我在第一行有一些文本和图标，我试图将它打包成 2 列，并排排列。

我想有很多方法可以格式化文本（例如，无序列表）。另外，我可能会在我的代码中使用 Font Awesome 图标而不是 img 标签。

无论格式化文本如何，我的问题是将文本和图标定位在左/右列的中心。

如果我尝试使文本居中，图标停留在列的左角，或者图标和文本在列的左侧居中等。我尝试制作媒体对象并对齐它们，但也没有结果。

很快：我尝试过的所有解决方案都会导致文本和所属图标未与列中心对齐。

我希望它看起来像这样：https ://prnt.sc/mb3s2i

小提琴：https ://jsfiddle.net/wLy5ce4o/

HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6" style="background-color:#000; ">
<div class="media d-flex align-items-center justify-content-center" style="padding-top:50px; padding-left:50px;">
<div class="media-left media-top">
<img src="images/xyz.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test1">
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="media" style="padding-top:50px">
<div class="media-left media-top">
<img src="images/xyz1.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
<div class="media" style="padding-top:50px;">
<div class="media-left media-middle">
<img src="images/xyz2.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test">
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
<div class="media" style="padding-top:50px;">
<div class="media-left media-bottom">
<img src="images/xyz3.png" class="media-object" style=" padding-top:-10px; width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test" style=" padding-top:10px; width:60px; color:#f636363;">
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>

CSS：

#test1 {

 list-style:none;
 font-weight: bolder;
 font-size: 15px;
 color:#fff; 
 letter-spacing: 0;
 line-height: 0,5rem;
 padding-top: 0px;
 padding-bottom: 80px;
 }




  #test {

 list-style:none;
 font-weight: bolder;
 font-size: 15px;
 color:#636363; 
 letter-spacing: 0;
 line-height: 1rem;
 }

标签： bootstrap-4

解决方案

这里发生的事情基本上是我创建了两个占据整个屏幕的网格，如果你想要相等的列，请将 max-width 放在 simple-one 和 simple-two 中。然后你在以自身为中心的网格内创建 flex。如果你想从顶部显示，只需创建另一个带有 display: flex 和 flex-direction 到列和自对齐到顶部的 div。检查我在https://jsfiddle.net/omnb12dw/2/中添加的小提琴。如果你是初学者，是时候开始学习 flex 和 grid 了。

<div class="simple-grid">
  <div class="simple-one">
    <p>
    Some Paragraph
    </p>
    <p>
    Add More and it will follow center
    </p>
  </div>

  <div class="simple-two">
    <p>
    this is just the design
    </p>
    <p>
    it should be the same
    </p>
  </div>
</div>

    div {
  padding: 0;
  margin: 0;
}
.simple-grid {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-areas: 'a a';
  border: 1px dotted black;
}

.simple-one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  height: 100vh;
  border: 1px dotted black;
}

.simple-two {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px dotted black;
}

推荐阅读