【发布时间】：2019-12-01 17:12:04
【问题描述】：
我目前正在为一个工作申请项目工作，我需要使用引导程序重新创建 stripe.com 网站。我目前正在网站的以下部分苦苦挣扎：
很遗憾，我现在的作品是这样的：
我想要完成的是让 svg 在每张卡片中向左浮动，以便标题和段落元素直接显示在它们的右侧而不是它们下方。
到目前为止，我已经尝试使用 CSS 和引导类来使 SVG 元素向左浮动，但没有成功，经过 45 分钟的谷歌搜索后，我决定我应该询问 stckOflw。这是我当前的相关代码：
.card-section{
background-color: #F6F9FC;
}
.card-section svg{
height: 130px;
width:130px;
position: relative;
top: 50%;
left: -35px;
/* float: left; */
}
.green-card h5{
margin: 0 0 5px;
font-size: 17px;
line-height: 28px;
font-weight: 600;
letter-spacing: .025em;
color: #24b47e;
}
.blue-card h5{
margin: 0 0 5px;
font-size: 17px;
line-height: 28px;
font-weight: 600;
letter-spacing: .025em;
color: #3297d3;
}
.card-section p{
font-weight: 400;
font-size: 17px;
line-height: 28px;
color: #525f7f;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.card-section .card{
overflow:hidden;
/* padding: 40px 40px 40px 120px; */
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card green-card">
<svg viewBox="0 0 130 130" class="float-left">
<path class="hover-fillLight" fill="#76E5A2"
d="M65 10c30.376 0 55 24.624 55 55s-24.624 55-55 55-55-24.624-55-55 24.624-55 55-55z"></path>
<path fill="#FFF"
d="M102.274 27.78v-.002c-9.628-9.615-22.968-15.526-37.69-15.408-28.292.228-51.557 23.072-52.238 51.32-.22 9.175 1.915 17.832 5.84 25.416.1.192.317.29.526.24.003 0 .006 0 .01-.002a.462.462 0 0 0 .324-.616c-5.15-13.598-2.25-29.54 8.713-40.488 14.915-14.898 39.102-14.898 54.02 0L48.25 81.725c14.917 14.897 39.104 14.897 54.022 0 14.916-14.897 14.917-39.048.002-53.945z">
</path>
<path class="hover-fillDark" fill="#159570"
d="M88.198 58.794c3.435 12.802-4.173 25.96-16.992 29.39-12.82 3.43-25.997-4.166-29.43-16.968-3.436-12.802 4.17-25.96 16.99-29.39 12.82-3.43 25.997 4.166 29.43 16.968z">
</path>
</svg>
<h5 class="">Recuring Payments</h5>
<p class="">
Send Invoices, manage subscriptions and reduce payment declines with Stripe's recovery tools. Explore Stripe Billing.
</p>
</div>
</div>
<div class="col-md-6">
<div class="card blue-card">
<svg class="float-left" viewBox="0 0 130 130">
<path class="hover-fillLight" fill="#69D5F8"
d="M65 10c30.376 0 55 24.624 55 55s-24.624 55-55 55-55-24.624-55-55 24.624-55 55-55z"></path>
<path fill="#FFF"
d="M48 79.552V47.998H34.73c-.65 0-1.275.26-1.735.72L13.765 68.07a3.7 3.7 0 0 0-1.053 3.068c2.92 23.81 22.293 43.188 46.103 46.114a3.7 3.7 0 0 0 3.067-1.052L81.29 97.05c.46-.46.717-1.084.717-1.735L82 82l-31.545.005A2.454 2.454 0 0 1 48 79.552z">
</path>
<path class="hover-fillDark" fill="#217AB7"
d="M119.55 58.073L96.344 81.28c-.46.46-1.085.72-1.736.72H81.993V50.462a2.454 2.454 0 0 0-2.453-2.455H48l.002-12.613c0-.65.258-1.276.718-1.736L71.93 10.45c24.83 3.123 44.497 22.79 47.62 47.623z">
</path>
</svg>
<h5>PAYMENTS FOR PLATFORMS</h5>
<p>
Stripe Connect gives platforms and marketplaces the tools to easily support multi-party payments and get sellers in
25 counties paid.
</p>
</div>
</div>
</div>
</div>
</div>我发现的一件事是，当我尝试使用 float: left;在我的 CSS 上为我的卡片中的 SVG 元素，然后我删除引导程序，它们工作。但是，此项目需要引导程序。
【问题讨论】：
标签： twitter-bootstrap svg css-float