html - 在 Bootstrap 中从全宽容器流体创建 2 列

标签 html css twitter-bootstrap-3

我想从 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>

预期输出:

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

最佳答案

据我了解你的意思是:

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

关于html - 在 Bootstrap 中从全宽容器流体创建 2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47765927/

相关文章:

JavaScript、Jquery子节点迭代

jquery - 在 jQuery Mobile 中自定义选择菜单

javascript - 在javascript中获取选择颜色?

html - 是否可以使用纯 CSS 根据包含的图像宽度调整 div 的宽度,而不是在浏览器窗口调整大小时?

javascript - Moment.js 在特定时间创建弹出窗口

html - 如何制作侧面导航栏并让 div 填充其余空间

javascript - CSS渐变无法刷新

html - 在 Bootstrap 3 的折叠导航栏中显示图标

html - 如何在数据库中的图像之上制作 CSS 叠加层

html - 拆分进度条