Bootstrap 5.0.3自定义CSS不起作用

Question

嘿我正试图从这个source.

制作左中右键

所以我从

开始

  

npm install bootstrap @ 3

之后我因为演示页面的描述而安装了jQuery

  

npm install jquery

我的代码与演示页面完全相同，但我得到的是：

.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}

<div class="col-md-4">
    <div class="btn-group">
         <button type="button" class="btn btn-round btn-default">Left</button>
         <button type="button" class="btn btn-default">Middle</button>
         <button type="button" class="btn btn-round btn-default">Right</button>
    </div>                     
</div>

Answer 1

您可以使用解决方案https://jsfiddle.net/ppL8stkv/

.btn-round-lg{
  border-radius: 22.5px;
}
.btn-round{
  border-radius: 17px;
}
.btn-round-sm{
  border-radius: 15px;
}
.btn-round-xs{
  border-radius: 11px;
  padding-left: 10px;
  padding-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
        <div class="btn-group">
             <button type="button" class="btn btn-round btn-default">Left</button>
             <button type="button" class="btn btn-default">Middle</button>
             <button type="button" class="btn btn-round btn-default">Right</button>
        </div>                     
    </div>
  </div>
</div>

您可能错过了bootstrap library。检查jsfiddle。

希望这会对你有所帮助。