Question

我对图像进行了拼接，并试图根据某些尺寸增加/减少图像的宽度。

这很有效。

当我在bootstrap中包含此图像时，图像高度被bootstrap覆盖，图像的高度会降低。尝试删除bootstrap并运行小提琴。输出将具有原始图像高度。

<div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-4 sector">
            <h3>Services</h3>
            <i class="fa fa-gear"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>
          <div class="col-md-4 sector">
            <h3>About me</h3>
            <i class="fa fa-address-card-o"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>

          <div class="col-md-4 sector">
            <h3>Contact</h3>
            <i class="fa fa-phone"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-container" id="myMod">
     <div class="modal-content">
          <span class="close">&times</span>
          <h1>Heading</h1>
          <p>Some text goes in here...</p>
     </div>
</div>
  <div class="showcase">
      <div class="container">
        <h1>Got Ideas?</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed sem rhoncus urna iaculis faucibus. Pellentesque ultrices nibh ac imperdiet tincidunt. Donec hendrerit velit eros</p>
        <a href="about.html" class="btn btn-primary">Read More</a>
      </div>
    </div>

  <script type="text/javascript">
    // Get the button that opens the modal
     var myOver = document.getElementsByClassName('over');
     // Get modal to pass it to function
     var modal = document.getElementById('myMod');
     // get closing button
     var span = document.getElementsByClassName('close')[0];
     // Function to open the modal
     for(var i = 0; i<myOver.length; i++){
        myOver[i].addEventListener('click', function(){
         modal.style.display = 'block';
        });
     }


    // When the user clicks on <span> (x), close the modal
    span.onclick = function(){
    modal.style.display='none';
    }

  </script>

有关如何解决此问题的任何指示都会有所帮助。这是bootstrap 3 CDN的链接

system

这是小提琴

http://getbootstrap.com/getting-started/

Answer 1

如果你的css代码被bootstrap覆盖，你可以尝试使用值：！important。例如： div {color：red！important;} 这将是主色。

Answer 2

您的解决方案取决于content-box的默认box-sizing值。 Bootstrap的网格系统要求所有列都有box-sizing:border-box，因此具有设置边框的列不会破坏网格，比其他列宽。

事实上，如果计算宽度不包括边界，很多元素都有可能破坏Bootstrap的网格系统，因此他们只是将box-sizing:border-box应用于所有*。

简而言之，

.tireImageFirst {
    box-sizing: content-box;
}

...将解决您的问题。更新了fidlle。

Bootstrap CSS搞乱图像（边框图像）

2 个答案: