的投資組合模式與填充左自動

的知識+我把這個模板的代碼：Template Here 的投資組合模式與填充左自動

我使用的是引導一個portfolio-modal和它顯示了以下錯誤：

當我打開，模態會自動出現+ padding-left:17px。我打開控制檯，它顯示：

element.style { 
display: block; 
padding-left: 17px; 
}

但是，此代碼不存在。我不知道如何，但它是自動添加的。

有沒有人遇到過這個問題？有誰知道如何解決這個錯誤/衝突？

.img-centered { 
 
    margin:0 auto 
 
} 
 

 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover { 
 
    background:#f05f40; 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
    opacity:0; 
 
    transition:all ease .5s; 
 
    -webkit-transition:all ease .5s; 
 
    -moz-transition:all ease .5s 
 
} 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
 
    opacity:1 
 
} 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
 
    position:absolute; 
 
    width:100%; 
 
    height:20px; 
 
    font-size:20px; 
 
    text-align:center; 
 
    top:50%; 
 
    margin-top:-12px; 
 
    color:#fff 
 
} 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
 
    margin-top:-12px 
 
} 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
 
    margin:0 
 
} 
 
#portfolio .portfolio-item .portfolio-caption { 
 
    max-width:400px; 
 
    margin:0 auto; 
 
    background-color:#fff; 
 
    text-align:center; 
 
    padding:25px 
 
} 
 
#portfolio .portfolio-item .portfolio-caption h4 { 
 
    text-transform:none; 
 
    margin:0 
 
} 
 
#portfolio .portfolio-item .portfolio-caption p { 
 
    font-family:"Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-style:italic; 
 
    font-size:16px; 
 
    margin:0 
 
} 
 

 
.portfolio-modal .modal-content { 
 
    border-radius:0; 
 
    background-clip:border-box; 
 
    -webkit-box-shadow:none; 
 
    box-shadow:none; 
 
    border:0; 
 
    min-height:100%; 
 
    width: 100%; 
 
    padding:100px 0; 
 
    text-align:center; 
 
} 
 
.portfolio-modal .modal-content h2 { 
 
    margin-bottom:15px; 
 
    font-size:3em 
 
} 
 
.portfolio-modal .modal-content p { 
 
    margin-bottom:30px 
 
} 
 
.portfolio-modal .modal-content p.item-intro { 
 
    margin:20px 0 30px; 
 
    font-family:"Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-style:italic; 
 
    font-size:16px 
 
} 
 
.portfolio-modal .modal-content ul.list-inline { 
 
    margin-bottom:30px; 
 
    margin-top:0 
 
} 
 
.portfolio-modal .modal-content img { 
 
    margin-bottom:30px 
 
} 
 
.portfolio-modal .close-modal { 
 
    position:absolute; 
 
    width:75px; 
 
    height:75px; 
 
    background-color:transparent; 
 
    bottom:25px; 
 
    right:25px; 
 
    cursor:pointer 
 
} 
 
.portfolio-modal .close-modal:hover { 
 
    opacity:.3 
 
} 
 
.portfolio-modal .close-modal .lr { 
 
    height:75px; 
 
    width:1px; 
 
    margin-left:35px; 
 
    background-color:#222; 
 
    transform:rotate(45deg); 
 
    -ms-transform:rotate(45deg); 
 
    -webkit-transform:rotate(45deg); 
 
    z-index:1051 
 
} 
 
.portfolio-modal .close-modal .lr .rl { 
 
    height:75px; 
 
    width:1px; 
 
    background-color:#222; 
 
    transform:rotate(90deg); 
 
    -ms-transform:rotate(90deg); 
 
    -webkit-transform:rotate(90deg); 
 
    z-index:1052 
 
} 
 
.portfolio-modal .modal-backdrop { 
 
    opacity:0; 
 
    display:none 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<section class="no-padding" id="portfolio"> 
 
     <div class="container-fluid"> 
 
      <div class="row no-gutter"> 
 
       
 
       <div class="col-lg-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">      
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content">        
 
           <i class="fa fa-plus fa-3x"></i> 
 
          </div> 
 
         </div> 
 

 
         <img src="http://veja.abril.com.br/blog/radar-on-line/files/2015/04/modal.jpg" class="img-responsive" alt=""> 
 
         </a>  
 
       </div> 
 
       </div> 
 
      </div> 
 
      </section> 
 

 

 

 
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> 
 
     <div class="modal-content"> 
 
      <div class="close-modal" data-dismiss="modal"> 
 
       <div class="lr"> 
 
        <div class="rl"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-lg-8 col-lg-offset-2"> 
 
         <div class="modal-body"> 
 
          
 
          <h2>Project Name</h2> 
 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
 
          <img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt=""> 
 
          
 
          <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia exsit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repu. Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia exsit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repuUse this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia exsit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repu</p> 
 
          
 
          <strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p> 
 
          <ul class="list-inline"> 
 
           <li>Date: July 2014</li> 
 
           <li>Client: Round Icons</li> 
 
           <li>Category: Graphic Design</li> 
 
          </ul> 
 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2016-02-26 Zkk

您是否嘗試過使用CSS？我假設CSS來自引導CSS源之一鏈接---// element.style {display：block; block; padding-left：0px！important; } – Alex

聽起來像它在JavaScript添加。

這將是元素的內嵌樣式，例如

<body style="display:block; padding-left:17px;">

您應該能夠打開開發者工具，以及按Ctrl + F/CMD + F來搜索知識+和找到它。

他們可能會添加它來嘗試和抵消頁面在觸發沒有添加滾動條時彈出的任何跳轉。

一種簡單的方法來解決它會覆蓋風格

.offending__element{ 
    padding-left:0px !important; 
}

這不是解決它的最好辦法，但我們可以用你提供什麼提供了唯一的解決方案。

來源

2016-02-26 14:15:57 Callam

的投資組合模式與填充左自動

回答

相關問題