Question

我添加了一个徽标，但现在它在导航栏中看起来非常小，徽标大小为200x72像素。请解释我的错误。这是我的custom.css：

＆＃13;

.repop-row,
.thumbnail {
  cursor: pointer
}
.ajax-loader,
.offer-n-accept,
.thumbnail {
  text-align: center
}
#declaration,
#save_data,
.ajax-loader,
.error-msg,
.payment_information,
.previews {
  display: none
}
@font-face{font-family:brandfont;src:url(Inversionz.otf)}

.branded {
  font-family: brandfont;
  font-size: 350%;
  color: #5CB85C
}
.navbar .navbar-brand,
.navbar-inverse .navbar-brand {
  font-family: brandfont;
  font-size: 40px;
  color: #5CB85C
}
.navbar-default .navbar-brand:hover {
  font-family: brandfont;
  font-size: 40px;
  color: #FFF
}
.row.repsteps,
.row.steps {
  margin-bottom: 10px;
  text-align: center;
  display: none
}
.thumbnail:hover {
  border-color: #2E64FE
}
h1 span {
  color: #2E64FE
}
.offer-n-accept span {
  font-size: 80px
}
.footer-links {
  color: #ebebeb;
  margin-left: 5px;
  margin-right: 5px
}
.repop-row,
.repop-row-selected {
  border: 1px solid #ebebeb;
  padding: 20px;
  margin-left: auto;
  margin-right: auto
}
footer.well {
  background-color: #000;
  color: #FFF;
  margin-top: 0;
  margin-bottom: 0;
  border-top: 10px solid #2e64fe
}
.social-icons {
  font-size: 43px;
  color: #fff
}
.repop-row {
  border-radius: 2px;
  width: 90%;
  height: 90%
}
.repop-row-selected {
  border-radius: 2px;
  width: 90%;
  height: 90%;
  background-color: #2e64fe;
  color: #fff;
  cursor: pointer
}
.repop-row:hover {
  border-color: #2e64fe
}
.repop-row-selected .repop-price-col {
  font-size: 20px;
  color: #333;
  background-color: #fff;
  border-radius: 2px;
  padding: 5px
}
.repop-price-col,
.selected .thumbnail {
  background-color: #2e64fe
}
.repop-price-col {
  font-size: 20px;
  color: #fff;
  border-radius: 2px;
  padding: 5px
}
.repop-row-selected .repop-title-col {
  font-size: 20px;
  margin-top: 4px;
  color: #fff
}
.repop-title-col {
  font-size: 20px;
  margin-top: 4px
}
.selected .thumbnail .caption {
  color: #fff
}
.thumbnail .preview-title {
  font-size: 16px;
  color: #2e64fe
}
span.device-price {
  font-size: 40px;
  color: #337AB7;
  font-weight: 700
}
.facebook-icon:hover {
  color: #3A5795
}
.twitter-icon:hover {
  color: #2B7BB9
}
.howitworks {
  background-color: #F2F2F2;
  padding: 50px;
  margin-bottom: 0
}
.howitworks div h3 {
  color: #2e64fe
}
.howitworks div span.fa {
  font-size: 80px
}
.accessory-selected .thumbnail {
  background-color: #2e64fe
}
.accessory-selected .thumbnail .caption h3 {
  color: #FFF
}
.social-icons {
  margin: 5px
}
.faq {
  background-color: #FAFAFA
}
.item img {
  margin-left: auto;
  margin-right: auto
}
.feature h2 {
  color: #2e64fe
}
.btn-toolbar .btn {
  margin-bottom: 5px
}
@media(max-width:767px){

.h1,
h1 {
  font-size: 32px
}
.h3,
h3 {
  font-size: 18px
}
}
.section-md {
  min-height: 700px!important
}
.navbar-right span {
  width: 20px
}
.repop-row {
  margin-top: 10px
}

＆＃13;

我希望我的导航栏/徽标看起来像这个网站上的导航栏：http://www.techtwice.com/

Answer 1

这有很多种方法，但这是我常用的方法：

thumbnail{
    height:150px;
}

或

thumbnail{ height: 200%; //This makes the image much more 'responsive' }

以上将修复缩略图或图像/徽标的宽度，并相应调整高度。

Answer 2

我将使用新的高度缩放器

vh

因此它将是：

thumbnail{
    height 200vh;
}

让我的Bootstrap导航栏更大一些

2 个答案: