javascript - 投资组合模态，自动向左填充 17px

Question

我拿了这个模板的代码:Template Here

我正在使用带 Bootstrap 的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>

Answer 1

听起来像是在 javascript 中添加的。

它将是元素上的内联样式，例如

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

你应该可以打开开发工具，然后 ctrl + f/cmd +f 搜索 17px 并找到它。

他们添加它可能是为了尝试在没有添加滚动条的情况下触发弹出窗口时抵消任何页面跳转体验。

修复它的一个简单方法是覆盖样式

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

这不是解决问题的最佳方法，但却是我们可以根据您提供的内容提供的唯一解决方案。