时间戳

首页 > 解决方案 > 图像后面的 CSS 圆圈占据整个容器宽度

html - 图像后面的 CSS 圆圈占据整个容器宽度

问题描述

我正在尝试使用 CSS 在徽标后面画一个圆圈，但由于它一直占据容器的整个宽度，所以我很挣扎。

https://jsfiddle.net/leelawtondesign/hfqk6a0g/5/#&togetherjs=HAg4AK4vSo

这就是它的样子...

这就是它的外观......

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">


    <div class="col-12 col-md-3 my-auto order-2 order-md-1">
      <div class="pt-5 pt-md-3 d-flex justify-content-center">
        <div class=""></div>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-facebook btn-rounded mx-2"><i class="fa fa-facebook"></i></button></a>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-twitter btn-rounded mx-2"><i class="fa fa-twitter"></i></button></a>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-instagram btn-rounded mx-2"><i class="fa fa-instagram"></i></button></a>
      </div>
    </div>


    <div class="col-12 col-md-6 order-1 order-md-2 logo d-flex position-relative">
      <img class="pt-3 pt-md-5 pb-4 pb-md-5 m-auto align-content-center" src="img/safety_first_logo.png">
    </div>


    <div class="pt-3 pt-md-0 col-12 col-md-3 text-right my-auto order-3 d-flex justify-content-center justify-content-md-end">
      <i class="fas fa-phone px-2"></i> <a href="tel:07481755545">07460162247</a>
    </div>

  </div>
</div>

标签： htmlcssbootstrap-4

解决方案

推荐阅读