使用引导程序实现响应式但无填充设计

Question

我有一个如下设计，并使用引导程序作为默认响应框架。我已经想出了我需要对设计进行编码的基本结构，但引导行和填充的填充会以我的方式进行！使用bootstrap实现这种设计的最佳方式是什么？篡改bootstrap提供的填充量是否正确？

我的设计

我当前的代码变为如下

<div class="row"> 
 
    <div class="location-map-container"> 
 
    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> 
 
     <div class="map-container"> 
 
     <div style="overflow:hidden;height:350px;resize:none;max-width:100%;"> 
 
      <div id="display-google-map" style="height:100%; width:100%;max-width:100%;"> 
 
      <iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Colombo,+Western+Province,+Sri+Lanka&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe> 
 
      </div> 
 
      <a class="google-code" href="https://www.hostingreviews.website/compare/hostgator-vs-godaddy" id="make-map-information">godaddy vs hostgator</a> 
 
      <style>#display-google-map .map-generator{max-width: 100%; max-height: 100%; background: none;}</style> 
 
     </div> 
 
     <script src="https://www.hostingreviews.website/google-maps-authorization.js?id=16b56aab-cf5d-8427-20bf-91c192fb12e6&c=google-code&u=1469307704" defer="defer" async="async"></script> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您必须添加一个新的类，并把它添加到列包装器复位内边距，

.no-gutter > [class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

见例如： https://jsfiddle.net/max8bc1h/

Answer 2

注意

篡改引导默认padding是不好的做法，您应该避免这种情况。至少您可以通过创建自定义 css class来覆盖引导程序填充。

像

.no-padding{ 
 
     padding:0px; 
 
    } 
 
    .cus-padding{ 
 
     padding:0px 15px !important; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="location-map-container"> 
 
    <div class=" col-xs-12 col-sm-12 col-lg-9 col-md-9 no-padding"> 
 
     <div class="map-container"> 
 
     <div style="overflow:hidden;height:350px;resize:none;max-width:100%;"> 
 
      <div id="display-google-map" style="height:100%; width:100%;max-width:100%;"> 
 
      <iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Colombo,+Western+Province,+Sri+Lanka&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe> 
 
      </div> 
 
      <a class="google-code" href="https://www.hostingreviews.website/compare/hostgator-vs-godaddy" id="make-map-information">godaddy vs hostgator</a> 
 
      <style>#display-google-map .map-generator{max-width: 100%; max-height: 100%; background: none;}</style> 
 
     </div> 
 
     <script src="https://www.hostingreviews.website/google-maps-authorization.js?id=16b56aab-cf5d-8427-20bf-91c192fb12e6&c=google-code&u=1469307704" defer="defer" async="async"></script> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-lg-3 col-md-3 cus-padding"> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
     <div class="location-item"> 
 
     <h3>Name</h3> 
 
     <p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>