Bootstrap расширение карт вызывает проблемы с Bootstrap navbar - PullRequest
Новая
       12

Bootstrap расширение карт вызывает проблемы с Bootstrap navbar

1 голос
/ 13 января 2020

Я работаю над сборными карточками для веб-страницы, используя Bootstrap 4. Однако, когда я пытаюсь использовать навигационную панель bootstrap в сочетании с этими картами, появляется навигационная панель с большим количеством синих ссылок. Кроме того, меню гамбургеров вообще не отображается.

Вот ссылка на мой CodePen.

https://codepen.io/asizemore/pen/ExaRPwL

Кто-нибудь знаете, почему это может быть сделано и как это исправить? 

/* cards */

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: -5px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }
  x .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: 0px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }
  .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}
image

1 Ответ

2 голосов
/ 13 января 2020

Вот код. Надеюсь, это поможет вам. Вы не подали заявку Bootstrap 4. Пожалуйста, проверьте это. Я упомянул ссылку в коде. Если какие-либо изменения, пожалуйста, дайте мне знать. 

/* cards */

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: -5px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }

  x .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: 0px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }

  .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}
image
...