html - 如何在 bootstrap 3/4 中使 4 个矩形框居中于屏幕？

Question

我用 CSS 制作了 4 个矩形框。这是 fiddle为了它。

此刻，它们看起来与下面的设计完全相似。我想知道如何在 Bootstrap 4 中制作完全相同的(下方)设计(我用 fiddle 制作)

我用于框的 CSS 是:

/***** Company heads CTO, CFO, and CEO START ************/

.company-heads {
    margin-left: 300px;
    padding-top: 80px;
    font-style: italic;
    margin-right: 289px
}

.company-heads .rectangle {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 22px;
    width: 355px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
    position: relative;
}

.company-heads .rectangle .circle {
    background: #aaa;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    position: absolute;
    top: 20px;
    left: 20px;
}


/***** Company heads CTO, CFO, and CEO FINISH ************/

矩形框的宽度目前为355px，但可以根据屏幕大小进行调整。

我尝试在 Bootstrap 4 中使用以下代码，但没有成功。

<div class="container">
   <div class="row justify-content-center">
      <div class="col-lg-3 left-side">ABC</div>
      <div class="col-lg-3 right-side">DEF</div>
  </div
</div>

Answer 1

.row {
  text-align:center;
}

.col-md-4 {
  border-radius:20px;
  margin:10px;
  border:1px solid #000;
  display:inline-block;
  float:none !important;
}

.col-md-2 {
  border-radius:100%;
  height:60px;
  width:60px;
  background:#ccc;
  width:25%;
  margin:20px;
}

.row h1, .row p {
  font-style:italic;
  text-align:left;
}

.row h1 {
  font-size:1.4em;
}

.row p {
  font-size:1em;
}

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-2"></div>
        <h1>Will's profile, CEO</h1>
        <p>Say something inspiring will</p>
    </div>
    <div class="col-md-4">
      <div class="col-md-2"></div>
        <h1>Will's profile, CEO</h1>
        <p>Say something inspiring will</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-2"></div>
        <h1>Zeeshan, CTO</h1>
        <p>Say something inspiring</p>
    </div>
    <div class="col-md-4">
      <div class="col-md-2"></div>
        <h1>Whoever yall hire next</h1>
        <p>Say something inspiring</p>
    </div>
  </div>
</div>

这是演示工作的codepen。 New Demo

h1 {
  font-style: italic;
}

p {
  font-style: italic;
}

.col-md-5 {
  border-radius:15px;
  margin:10px;
  border:1px solid #000;
}

.col-md-2 {
  border-radius:100%;
  height:60px;
  width:60px;
  background:#ccc;
  width:25%;
  margin:20px;
}

.row h1 {
  font-size:1.4em;
}

.row p {
  font-size:1em;
}

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div class="col-md-2"></div>
        <h1>Will's profile, CEO</h1>
        <p>Say something inspiring will</p>
    </div>
    <div class="col-md-5">
      <div class="col-md-2"></div>
        <h1>Will's profile, CEO</h1>
        <p>Say something inspiring will</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <div class="col-md-2"></div>
        <h1>Zeeshan, CTO</h1>
        <p>Say something inspiring</p>
    </div>
    <div class="col-md-5">
      <div class="col-md-2"></div>
        <h1>Whoever yall hire next</h1>
        <p>Say something inspiring</p>
    </div>
  </div>
</div>