bootstrap btn-group按钮未加入

Question

我使用的是bootstrap 3.3.7版，我从W3Schools网站获取此代码（我国目前不提供bootstrap网站）：

    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>

按钮未连接在一起：

我尝试在{和1}}中添加role="group"，在表单和内部容器中以及在页面上裸露。在chrome开发人员工具中，我可以看到正在应用的btn-group并且没有被覆盖（我希望border-radius是）并且我已经重新下载了boostrap CSS文件，以防我不小心损坏它们：

我还能看到为什么他们没有加入？

我在输入组上有类似的东西，但此时无法找到一个例子。

修改

基于其中一个答案，我删除了所有的应用程序样式并链接到引导程序CDN，但它仍然无法正常工作，我看到小提琴和片段确实有效，但我是仍然不知道为什么它在这里不起作用。基于相同的答案，我将其添加到我的应用程序CSS：

btn-group-lg

他们现在看起来像预期的那样，但如果可能的话，我仍然希望了解最新情况：（

Answer 1

尝试将此添加到您的样式，这将检查btn组中的btn是不是第一个或最后一个子项，将border-radius转为0：

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0 !important;
}

对我有用吗？你有任何css使用！important可以覆盖bootstrap风格吗？

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以创建自己的btn的另一个选项，请检查以下内容：

最重要的部分是

.btngrp li:first-child {
  border-radius: 6px 6px 0 0;
  border-top-width: 2px;
}
.btngrp li:last-child {
  border-radius: 0 0 6px 6px;
}

这将通过强制first btn在组中创建btn组效果，使左侧为border-radius，组为last btn，右侧为border-radius，任何btn介于两者之间不会有任何border-radius attr。

＆＃13;

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  text-align: center;
  padding: 2em;
  font-family: raleway, sans-serif;
}

.btngrp {
  list-style-type: none;
  margin: 2em auto;
  padding: 0;
  font-size: .85em;
  display: table;
  letterspacing: .2em;
}
@media (min-width: 768px) {
  .btngrp {
    font-size: 1em;
  }
}
.btngrp li {
  vertical-align: middle;
  background: #337ab7;
  padding: .75em 1.5em;
  line-height: 0.5;
  border: 2px solid #2e6da4;
  border-top-width: 0;
  -webkit-transition: 200ms;
  transition: 200ms;
}
.btngrp li:first-child {
  border-radius: 6px 6px 0 0;
  border-top-width: 2px;
}
.btngrp li:last-child {
  border-radius: 0 0 6px 6px;
}
@media (min-width: 480px) {
  .btngrp li {
    display: table-cell;
    border-top-width: 2px;
    border-left-width: 0;
  }
  .btngrp li:first-child {
    border-radius: 6px 0 0 6px;
    border-left-width: 2px;
  }
  .btngrp li:last-child {
    border-radius: 0 6px 6px 0;
  }
}
.btngrp li:hover {
  background: #286090;
 border: 2px solid ##204d74;
}
.btngrp a {
  display: block;
  text-align: center;
  padding: 0 .5em;
  text-decoration: none;
}
@media (min-width: 768px) {
  .btngrp a {
    padding: .5em .5em;
  }
}
.btngrp a:link, .btngrp a:visited {
  color: white;
}

＆＃13;

<ul class="btngrp">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Samsung</a></li>
  <li><a href="#">Sony</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;