Question

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

＆＃13;

.contactUsText {
    background-color: gray; 
    height: 50px;
}

.mailUs {
    height: 40px;
    background-color: gray;
    padding-top: 7px;
}

＆＃13;

<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>

＆＃13;

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

修改

这不是重复。

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

Answer 1

编辑：

由于您正在讨论整行的左/右外边距，因此您可以将style="padding-left: 0; padding-right: 0;"添加到具有formDiv类的div或定义新的noLeftRightPadding来删除它们类并将其应用于该div，如下面的代码段所示。

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

注意：对于内部div，您似乎还需要类似dislpay: inline-block的内容，因为div是一个块元素并且将放在一个新行（或者您可能会错过代码中的某些css）

＆＃13;

.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;*/
}

＆＃13;

<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>

＆＃13;

Bootstrap网格系统内部多个div

1 个答案: