如何在Bootstrap中使内容接触视口的边缘

3pvhb19x 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(3)|浏览(106)

我在使用Twitter Bootstrap使内容触及浏览器边缘时遇到了麻烦。
我正在开发一个网站，是全宽，那里有接触视口边缘的图像。我已经使用.container-fluid div到我的.row和col- div。
到目前为止我所尝试的：
1.我尝试从.container-fluid中删除填充，但不幸的是这会使浏览器中出现一个水平滚动条;
1.我附加了一个自定义类，从单个col-'s中删除了填充，但这似乎不适合与核心Bootstrap网格系统一起使用，以实现如此简单的效果。此外，其目的不是删除所有檐槽，而是删除row中的第一个和最后一个col-（分别为左檐槽和右檐槽）
1.我在我的网站上为不同的元素引入了负边距，这样它们就吃掉了我想去掉的浏览器两边的填充--然而，这也会让一个水平滚动条出现。
我已经在网上寻找这个问题的解决方案，但不幸的是，没有一个明确的答案。
简而言之：
在使用Bootstrap开发时，如何使内容接触视口的边缘？

twitter-bootstrap

来源：https://stackoverflow.com/questions/26678148/how-to-make-content-touch-the-edge-of-a-viewport-in-bootstrap

3条答案

按热度按时间

dsf9zpds1#

你不需要修改基础css，你可以创建类并根据需要使用。如果中间有排水沟，而外部边缘没有，我更喜欢为列创建一个内部元素。你必须使用overflow-x：hidden。

DEMO：http://jsbin.com/lujedi/1/

http://jsbin.com/lujedi/1/edit?html,css,output

HTML：

<div class="container-fluid full-width">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" /> 
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->
  
  <hr>
  
         <div class="container-fluid full-width has-inner">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->

CSS

.container-fluid.full-width {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}
.row.row-no-gutter {
    margin: 0
}
.row.row-no-gutter [class*="col-"] {
    padding: 0
}
.img-full-width {
    width: 100.5%;
    height: auto;
}
.has-inner .row.row-no-gutter {
    margin-left: -10px;
    margin-right: -10px;
}
.row.row-no-gutter .inner {
    padding-left: 10px;
    padding-right: 10px;
}

赞(0）回复(0）举报 2023-09-28

imzjd6km2#

谢谢你的建议.在此期间，我一直在测试代码，并得出了这个解决方案-这也为我的技巧：

.no-gutter [class*="col-"]:first-child  {
padding-left:0;
}

.no-gutter [class*="col-"]:last-child {
padding-right: 0;
}

赞(0）回复(0）举报 2023-09-28

4zcjmb1e3#

Bootstrap 5 solution（2023）-

万一有人在Bootstrap 5上寻找解决方案，你需要完全删除外部的container, container-fuild等，以实现边缘到边缘的布局。
在官方文档链接中的“无排水沟”一节中阅读更多内容-
https://getbootstrap.com/docs/5.0/layout/gutters/

赞(0）回复(0）举报 2023-09-28

我来回答

如何在Bootstrap中使内容接触视口的边缘

3条答案

DEMO：http://jsbin.com/lujedi/1/

相关问题

热门标签

最新问答