Кнопки начальной загрузки группы btn не объединены

Question

Я использую версию начальной загрузки 3.3.7, и у меня есть этот код с сайта W3Schools (сайт начальной загрузки в настоящее время недоступен в моей стране):

    <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>

Кнопки не соединены вместе:

Я пробовал добавлять role="group"с и без btn-group-lgвнутри формы и внутри контейнеров, а также на странице. В инструментах разработчика Chrome я вижу, что применяется btn-group, и ничего не переопределяется (я бы ожидал, что border-radius будет) И я заново загрузил CSS-файлы boostrap на случай, если я их случайно испортил:

Что еще я могу посмотреть, чтобы увидеть, почему они не присоединились?

У меня есть что-то похожее на группы ввода, но не могу найти пример на данный момент.

РЕДАКТИРОВАТЬ

Основываясь на одном из ответов, я удалил все стили приложения и связался с начальной загрузкой CDN, но он все еще не работал, я видел, как работают скрипты и фрагменты, но я все еще не знаю, почему это не работает здесь. Основываясь на том же ответе, я добавил это в CSS своего приложения:

.btn-group button.btn {
    border-radius:0px;
}
.btn-group button.btn:first-child {
    border-radius:6px 0 0 6px;
}

.btn-group button.btn:last-child {
    border-radius:0 6px 6px 0;
}

И теперь они выглядят так, как и ожидалось, но я все же хотел бы узнать о том, что происходит, если это возможно:(

Answer 1

Попробуйте добавить это к вашему стилю, это проверит, если btn в группе btn не первый или последний дочерний элемент, поверните border-radius в 0:

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

у меня нормально работает? у вас есть css, использующий! важный, который может перезаписать стиль начальной загрузки?

<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>

Другой вариант, вы можете создать свой собственный 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;
}

это создаст эффект группы BTN силой first btn в группе, чтобы иметь border-radius на левой стороне и last btn в группе, чтобы иметь border-radius с правой стороны, ни один btn между ними не будет иметь border-radius атр.

*, *: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;
}

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