在引导程序中使元素溢出 col

Question

我正在尝试在联系人卡片中创建一个谷歌评论部分，其中我有一个谷歌徽标图标和一个文本元素（谷歌评论）和字体真棒 5 星。我希望所有这些都垂直对齐。但是由于我给了 col-2 类，所有这些都将换行到下一行。我将附上所需的输出图像。

.row {
  height: 400px;
  background-color: grey;
}

.col-2 {
  background-color: yellow;
}

/* google-review */




.google-review {
  transform: rotate(90deg);
  transform-origin: top left;
  top:0;
  background-color: #88206d;
  overflow: visible;
}

.g-logo img {
  transform: rotate(-90deg);
  width: 38px;
  background-color: #fff;
  padding: 5px;
  border-radius: 22px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  
  
}

.stars {
  background: -webkit-linear-gradient(#FF3D00, #FFCE31);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">

<div class="container">
  <div class="row">
    <div class="col-5">
    </div>
    <div class="col-2 position-relative">


      <div class="google-review position-absolute text-light px-4 py-2">
        <div class="gtext-review"><span class="g-logo pr-3"><img src="https://i.ibb.co/PwTGZkb/search.png"></span>Google Review <span class="stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
      </div>



    </div>
    <div class="col-5">
    </div>

  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'></script>
<script src="./script.js"></script>

Answer 1

根据您想要的输出，这里是实现此目的的代码。

您可以在不编写自定义 CSS 的情况下完成大部分工作，因为引导程序涵盖了大多数 CSS 类以简化我们的工作。

如果我理解不正确，请在 cmets 中告诉我。

span.vertical-txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="col-2 position-relative">
  <!-- You can place it here -->
  <div class="position-absolute right-0 text-white p-2" style="background-color: #88206d;">
    <div class="d-flex flex-column align-items-center">
      <img src="https://i.ibb.co/PwTGZkb/search.png" width="20" alt="">
      <span class="vertical-txt py-2">Google Reviews</span>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
      <i class="fa fa-star py-1"></i>
    </div>
  </div>
</div>

Answer 2

只需将google-review div 的width 设置为400px。这是工作的 sn-p：

.row {
  height: 400px;
  background-color: grey;
}

.col-2 {
  background-color: yellow;
}

/* google-review */




.google-review {
  transform: rotate(90deg);
  transform-origin: top left;
  background-color: #88206d;
  overflow: visible;
  width: 400px;
}

.g-logo img {
  transform: rotate(-90deg);
  width: 38px;
  background-color: #fff;
  padding: 5px;
  border-radius: 22px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
  -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);


}

.stars {
  background: -webkit-linear-gradient(#FF3D00, #FFCE31);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">

<div class="container">
  <div class="row">
    <div class="col-5"></div>
    <div class="col-2">
      <div class="google-review text-light px-4 py-2">
        <div class="gtext-review">
          <span class="g-logo pr-3">
            <img src="https://i.ibb.co/PwTGZkb/search.png">
          </span>Google Review
          <span class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="col-5"></div>
  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'></script>
<script src="./script.js"></script>