使用引导程序实现响应性但填充较少的设计

时间:2016-07-24 09:58:25

标签: html css twitter-bootstrap

我有一个如下设计,我使用bootstrap作为默认的响应框架。我已经想出了我需要对设计进行编码的基本结构,但是bootstrap行和cols的填充会妨碍我!使用bootstrap实现此类设计的最佳方法是什么?篡改bootstrap给出的填充量是否可以?

我的设计

design

我目前的代码如下:



<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您必须添加一个新类并将其添加到列包装器以重置填充

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

请参阅示例:https://jsfiddle.net/max8bc1h/

答案 1 :(得分:0)

注意

  

篡改bootstrap默认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>