如何在引导栏的左侧或右侧制作文本

Question

我正在尝试制作此附件图像的html和css：

我考虑过制作2个引导程序列和一些<p>标记，有人可以看一下代码，然后判断这是一个好主意吗？

.price-container {
  width: 380px;
  height: 215px;
  background-color: #fff;
  box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -webkit-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -moz-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
}

.btn-start-price {
  font-weight: bold;
  height: 35px;
  width: 250px;
  background-color: #30637b;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 0%;
}

.price-from-text {
  font-size: 7px;
  font-weight: bold;
}

.price-part1 {
  font-size: 70px;
  font-weight: bolder;
  position: relative;
  right: 36%;
}

.price-from-text {
  position: absolute;
  top: 20%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex justify-content-center">
  <div class="mt-5 col-md-4 d-flex justify-content-center">
    <div class="price-container">
      <div class="col text-center">
        <div class="row d-flex justify-content-center">
          <div class="col-md-6 mt-4">
            <p class="price-from-text">A PARTIR DE</p>
            <p class="price-part1">9</p>
          </div>
        </div>
        <button type="button" class="btn-start-price  mt-3 btn btn-sm">COMMENCER MAINTENANT</button>
      </div>
    </div>
  </div>
</div>

如何在列的右侧制作右第一个部分（àpartir de / 9），在列的左侧制作另一个部分？

Answer 1

您可以使用DATEVALUE()和text-left引导类来做到这一点：

text-right

.price-card {
  background-color: #fff;
  box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -webkit-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
  -moz-box-shadow: 0px 0px 13px 1px rgba(104, 104, 104, 0.5);
}

.from-price {
  font-size: 7px;
  line-height: 1;
}
.start-price {
  margin-top: -7px;
  height: 70px;
  font-size: 70px;
  line-height: 1;
}
.end-price {
  font-size: 40px;
  line-height: 40px;
}
.per-price {
  font-size: 22px;
  line-height: 22px;
}

.btn-price {
  background-color: #30637b;
  color: #fff;
  border: none;
  border-radius: 0 !important;
}