Html 如何在 Bootstrap 3 中删除列填充以获得全角输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18797912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove column padding to have full-width inputs in Bootstrap 3?
提问by iffy
How do I get rid of padding in Bootstrap 3's columns?
如何摆脱 Bootstrap 3 列中的填充？
In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=previewand for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.
在下面的 plunkr 中，我希望按钮和文本输入能够触摸：http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview并为每个填充 div 的整个宽度。我希望它们没有左填充或右填充。“拉我离开”和“我也是”div 也是如此。
When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.
当我在自己的 CSS 中覆盖 padding-left 时，它会将所有内容拉到左侧，使“Jim”和“Hello”div 的内容离开屏幕。
Any ideas?
有任何想法吗？
回答by Peter
You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".
您可以通过向行添加一个类来实现这一点，该类从所有类名以“col-”开头的直接 div 元素中删除填充。
See here: http://plnkr.co/edit/MBkojy?p=preview
回答by Anobik
Here's the entire code what you wanted :) Please give a try
这是您想要的整个代码:) 请试一试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
Just a div
只是一个div
<div class="row">
<div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">Jim</div>
<div class="col-xs-6">Hello</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
<button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
</div>
<div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
<input type="text" class="col-xs-12" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">pull me left</div>
<div class="col-xs-6">me too</div>
</div>
</div>
</div>
</div>
I have done it for the button and text input :) you can proceed in the same way :)
我已经为按钮和文本输入完成了:) 你可以用同样的方式继续:)
回答by user1647020
You can set all divs to no padding:
您可以将所有 div 设置为无填充：
div {
padding-left: 0px !important;
padding-right: 0px !important;
}
For the other two divs, you'll need to give them some named class (in my example 'padLeft') that return the left padding to the divs.
对于其他两个 div，您需要为它们提供一些命名类（在我的示例中为“padLeft”），将左填充返回到 div。
div.padLeft {
padding-left: 15px;
}
That is the minimally invasive way to do it. If you have more div's where you want padding than not you simply inverse this, using a separate class for divs that you want the padding removed and leave the others to their default.
这是实现它的微创方式。如果您有更多的 div 需要填充，而不是简单地将其反转，请为要删除填充的 div 使用单独的类，并将其他类保留为默认值。
