Bootstrap Grid系统在一行内有多个div [重复]

Posted 2023-03-05

【中文标题】Bootstrap Grid系统在一行内有多个div [重复]

【英文标题】：Bootstrap Grid system multiple div inside a row [duplicate]

【发布时间】：2017-06-11 18:24:22

【问题描述】：

我有一个container，其中的行分为 8 列和 4 列，但是当我尝试将 div 放在 col 内时，该 col 内的 dov 的左侧和右侧有一个间距。这是为什么呢？

.contactUsText 
    background-color: gray; 
    height: 50px;


.mailUs 
    height: 40px;
    background-color: gray;
    padding-top: 7px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col col-12 col-sm-12 col-md-8 col-lg-8 mapDiv" id="maps">

    </div>
    <div class="col col-12 col-sm-12 col-md-4 col-lg-4 formDiv">
        <div class="contactUsText"> Connect </div>
        <div class  ="mailUs"> Leave Us a Message!</div> 
    </div>
</div>
<div class="row">
    <div class="col col-12 col-sm-12 col-md-12 footer"> </div>
</div>

联系我们，mailUs 两边都有空格。

编辑

这不是重复的。

这个问题是针对嵌套 container 的解决方案，但在我的问题中，只有一个 container 有多个 div 应用 htat 解决方案给我没有对整个 container 的填充，这不是我想要的.

【参考方案1】：

已编辑：

由于您正在谈论整行的外部左/右外边距，您可以通过将 style="padding-left: 0; padding-right: 0;" 添加到具有 formDiv 类的 div 或定义一个新的 noLeftRightPadding 类并将其应用于该类来删除它们div 如下 sn-p。

此外，要删除在两个内部 div（联系我们和 mailUs）之间添加的额外（水平）空间，您必须将它们的 html 代码并排连接在一起，它们之间没有任何换行符 (ENTER)，或者使用中指定的一些技巧this post。

注意：您似乎还需要 dislpay: inline-block 之类的东西用于内部 div，因为 div 是一个块元素，将放在一个新行（或者您可能会在代码中遗漏一些 css）

.row background: orange;

.row div.noLeftRightPadding padding-left:0; padding-right:0;

.contactUsText 
  background-color: gray; 
  height: 50px;
  /*display:inline-block;*/

    
.mailUs 
  height: 40px;
  background-color: gray;
  padding-top: 7px;
  /*display:inline-block;*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
    <div class="row">
        <div class="col col-12 col-sm-12 col-md-8 col-lg-8 mapDiv" id="maps">
        </div>
      
        <div class="col col-12 col-sm-12 col-md-4 col-lg-4 formDiv noLeftRightPadding">
            <div class="contactUsText"> Connect </div>
            <div class  ="mailUs"> Leave Us a Message!</div> 
	    </div>     
      
    </div>
    <div class="row">
        <div class="col col-12 col-sm-12 col-md-12 footer"> </div>
    </div>
</div>

【讨论】：

我说的是左右边距。谢谢芽:)

您可以考虑使用引导行元素。当您放置带有类行的 div 时，它具有 - 边距来否定填充。不确定我是否完全触及主题，但希望它有所帮助。干杯