Тег привязки не отображается и отображается в инструментах разработчика - PullRequest
2 голосов
/ 18 октября 2019

Я боролся с этим разделом кода уже несколько часов и не могу понять, почему он неактивен в браузере и в инструментах разработки. Предполагается отображать заголовок указанного элемента. До сих пор я не вижу никаких заголовков, пока я не удалю class="ad-box-title" из тега.

CSS

 /*Ad box*/
 .modern-img-indicator{
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0,0,0, 0.2);
   font-size: 11px;
   padding: 5px;
   color: #ffffff;
  }
  .ad-box {
    background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-bottom: 20px;
  }
 .ad-box .ads-thumbnail {
   display: block;
   overflow: hidden;
   position: relative;
   border-radius: 3px 3px 0 0;
   height: 158px;
  }
 .ad-box .caption {
   background: #fff none repeat scroll 0 0;
    padding: 7px 10px;
  }

 .ad-box-caption-title {
    height: 32px;
    margin-bottom: 5px;
    overflow: hidden;
  }
 .ad-box-caption-title .ad-box-title {
   color: #666666;
 }
 .ad-box-category {
   font-size: 11px;
   height: 30px;
    border-top: 1px solid #e7e7e7;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
   white-space: nowrap;
 }
.ad-box-footer {
     background-color: #f6f6f6;
    border-radius: 0 0 3px 3px;
   border-top: 1px solid #e7e7e7;
    box-shadow: 0 1px 0 0 #fff inset;
   padding: 5px 8px;
    position: relative;
 }
 span .ad-box-footer, .ad-box-price { 
   display: block;
 }
.ad-box-price {
   font-size: 12px;
 }
 .ad-box-premium i {
    margin-top: 7px;
    color: #f21aa5;
 }  
.ad-box-premium {
   border-left: 1px solid #ddd;
    color: #aaa;
   cursor: default;
    height: 28px;
   position: absolute;
   right: 1px;
   text-align: center;
  top: 1px;
   transition: color 0.15s linear 0s;
   width: 29px;
 }
.ad-box-premium img {
   max-height: 25px;
   width: auto;
 }
 .countdown{
   padding: 5px;
   font-size: 14px;
   text-align: center;
 }
.place-bid-btn{
  text-align: center;
 }

HTML

             <div class="col-md-3">
                 <div class="ad-box">
                     <!-- Thumbnail --> 
                     <div class="ads-thumbnail">
                         <a href="#">
                             <img src="/uploads/thumbs/cat.jpg" alt="Auction title" class="img-fluid">
                             <span class="modern-img-indicator">
                                <i class="far fa-file-image"></i>
                             </span>
                         </a>
                     </div>
                     <!-- Caption --> 
                     <div class="caption">
                         <div class="ad-box-caption-title">                                
                            <a href="#" class="ad-box-title">
                                 Title Here
                             </a>
                         </div>

                         <div class="ad-box-category">
                            <a href="#" class="price text-muted">
                                <i class="far fa-folder"></i> Category Name Here
                            </a>
                            <a href="#" class="price text-muted">
                                <i class="fas fa-map-marker-alt"></i> Location Here
                            </a>                                
                         </div>
                     </div>

                     <!-- Box footer --> 
                     <div class="ad-box-footer">
                         <span class="ad-box-price">Starting price here $0.00</span>
                         <span class="ad-box-price">Current Bid here $0.00</span>

                         <!-- If its a premium auction --> 
                         <div class="ad-box-premium">
                             <img src="/images/premium-icon.png" alt="Premium Auction Image here">
                         </div>

                        <!-- Countdown --> 
                        <div class="countdown">Time remaining</div>
                        <div class="place-bid-btn">
                            <a href="#" class="btn btn-primary mb-1">Place Bid</a>
                        </div>

                     </div>
                 </div>
             </div>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...