Question

我想从bootstrap 3框架创建两个100％宽度的列。我尝试创建，但它在左右两个位置之间显示了一些填充。

在我的代码中，左栏将用于显示谷歌地图，右侧将用于联系表格。

如何删除填充？我需要一个全宽的行..

这是我的代码。

<section id="contact">
<div class="container-fluid">

    <div class="row">
     </div class="col-md-6"> ... </div>
     </div class="col-md-6"> ... </div>
    </div>

</div>
</section>

预期输出：

--------------------------------
              |                     
              |
              |
              |
--------------------------------

Answer 1

据我所知，你的意思是：

#contact > .container-fluid > .row > div { border: 1px dashed #ddd;}

#contact > .container-fluid > .row > div:first-child { padding-right: 0;}

#contact > .container-fluid > .row > div:last-child { padding-left: 0;}

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<section id="contact">
<div class="container-fluid">

    <div class="row">
     <div class="col-xs-6"> map </div>
     <div class="col-xs-6"> contact form </div>
    </div>

</div>
</section>
</body>

Answer 2

以下链接可帮助您使用bootstrap实现布局： -

谷歌地图与联系表格

https://bootsnipp.com/snippets/featured/contact-us

从Bootstrap中的Fullwidth Container-Fluid创建2列

2 个答案: