Question

这是我的网页

www.cosmic.chillcastle.com

我想一起消除填充。

我一直在使用css，但似乎没有这样做。此外，在移动设备中，它看起来很好地垂直定向，但水平堆叠很奇怪。

我尝试使用css单独更正每个元素，使其没有填充。

这里是我使用的网格代码。

 <div class="col-1-3">
 <div class="module">

<img class="img-responsive" src="cosmicveggie-banner2_02.jpg" width:"100%" >        
 </div>
</div>
</div>

<div class="col-1-3">
 <div class="module">

<img class="img-responsive" src="cosmicveggie-banner2_03.jpg" width:"100%" >        
 </div>
 </div>

Answer 1

@ dunnj515，@ zimsystem谢谢，我最终废弃了整个布局并执行此操作：

mytemplateapp@1.0.0 dev /home/ubuntu/workspace/mytemplateapp
> nuxt

nuxt:build App root: /home/ubuntu/workspace/mytemplateapp +0ms
nuxt:build Generating .nuxt/ files... +1ms
Ready on http://127.0.0.1:8080
nuxt:build Generating routes... +14ms 
nuxt:build Generating files... +9ms
nuxt:build Adding webpack middleware... +17
Build completed in 4.204s


DONE  
Compiled successfully in 4210ms                                                                                                                            
Open http://127.0.0.1:8080

Answer 2

像ZimSystem提到的col-1-3和模块不是Bootstrap类。 Bootstrap网格排列成行和列，需要位于容器内。所以你的整体结构需要看起来像这样：

<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-responsive" src="cosmicveggie-banner1.jpg" width:"100%" >
    </div>
    <div class="col">
      <img class="img-responsive" src="cosmicveggie-banner2.jpg" width:"100%" >
    </div>
    <div class="col">
      <img class="img-responsive" src="cosmicveggie-banner3.jpg" width:"100%" >
    </div>
  </div>
</div>

结帐explanation in the documentation。

如何为我的引导网格填充无填充？

2 个答案: