Question

我想在右上角，右下角和左下角引入20px的边框半径。

但是即使在应用了边界半径之后，也没有应用它。

以下是小提琴链接：http://jsfiddle.net/1mpx06qs/1/

.frequentBookingCardsContainer {
  width: 305px;
  margin: 0 auto;
  padding: 10px 10px 40px 10px;
}

/* chatbotListOptionsBox */
.chatbotListOptionsBox {
  border-radius: 20px !important;
}

.chatbotListOptionsBox ul {
  border-radius: 20px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="cardContainer">

    <div class="frequentBookingCardsContainer">

        <div class="chatbotListOptionsBox">

            <!-- List Group Start -->
            <ul class="list-group rounded-right rounded-bottom">
                <li class="list-group-item rounded-0 rounded-right rounded-bottom">Cras justo odio</li>
                <li class="list-group-item rounded-0 rounded-right rounded-bottom">Dapibus ac facilisis in</li>
                <li class="list-group-item rounded-0 rounded-right rounded-bottom">Morbi leo risus</li>
                <li class="list-group-item rounded-0 rounded-right rounded-bottom">Porta ac consectetur ac</li>
                <li class="list-group-item rounded-0 rounded-right rounded-bottom">Vestibulum at eros</li>
            </ul>
            <!-- List Group End -->

        </div>

    </div>
</div>

Answer 1

这将产生您想要的布局：

html：

<div id="cardContainer">
  <div class="frequentBookingCardsContainer">
    <div class="chatbotListOptionsBox">
      <!-- List Group Start -->
      <ul class="list-group">
        <li class="list-group-item rounded-top-right-20">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item rounded-bottom-20">Vestibulum at eros</li>
      </ul>
      <!-- List Group End --> 
    </div>
  </div>
</div>

css：

/* Carousel data container */
.frequentBookingCardsContainer {
  width: 305px;
  margin: 0 auto;
  padding: 10px 10px 40px 10px;
}

.rounded-top-right-20 {
  border-top-right-radius: 20px!important;
}

.rounded-bottom-20 {
  border-bottom-left-radius: 20px!important;
  border-bottom-right-radius: 20px!important;
}

结果：

如果要将它们应用于每个列表项，可以使用以下代码段：

  <!-- List Group Start -->
  <ul class="list-group">
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Cras justo odio</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Dapibus ac facilisis in</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Morbi leo risus</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Porta ac consectetur ac</li>
    <li class="list-group-item rounded-top-right-20 rounded-bottom-20">Vestibulum at eros</li>
  </ul>
  <!-- List Group End -->

结果：

说明：您的样式因以下原因而未应用：

您将类别rounded-0与rounded-right和rounded-bottom一起应用了。
您的替代操作无效，因为bootstrap.css在组件的CSS之后加载，因此具有优先级。

结论：在这些情况下，请使用自定义css类。

如何在Bootstrap ul li上设置半径？

1 个答案: