在列中对齐布局

Question

我正在使用bootstrap，并尝试创建以下布局：

​

​

我试过了

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
      <div>APPLE INC (AAPL)</div>
      <div>NASDAQ</div>
      <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
    </div>
  </div>
</div>

​

我尝试了flexboxes，但是我的布局不能排列。

如何排列图片旁边的文字？

有什么建议吗?我哪里做错了？

Answer 1

你达到了95%的目标。我已经帮你做完了。实际上，您所缺少的就是一些嵌套的引导程序，用来生成一个col-10，其中包含公司的详细信息和徽标。

​

.name {
  font-size: 2rem;
}

.tv-symbol-icon {
  border-radius: 50%;
  width: 100%;
}

.tv-flag-country {
  margin: 0 0.5em;
  border-radius: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <div class="row">
        <div class="col-sm-2">
          <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
        </div>
        <div class="col-sm-10">
          <div class="row">
            <div class="name">APPLE INC</div>
          </div>
          <div class="row">
            <div>NASDAQ</div>
            <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
            <div>(AAPL)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​