Question

如何摆脱Bootstrap 3列中的填充？

在下面的plunkr中，我想让按钮和文本输入触摸：http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview并且每个都填充div的整个宽度。我希望他们没有左右填充。同样的“拉我左”和“我也是”div。

当我在我自己的CSS中覆盖padding-left时，它将所有内容拉到左侧，使“Jim”和“Hello”div的内容脱离屏幕。

有什么想法吗？

Answer 1

你可以通过在行中添加一个类来实现这一点，该类从所有直接div元素中删除填充，类名以“col - ”开头。

见这里：http://plnkr.co/edit/MBkojy?p=preview

Answer 2

这是您想要的整个代码:)请试一试

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

只是一个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>

我已经为按钮和文本输入做了:)你可以用同样的方式继续：）

Answer 3

您可以将所有div设置为无填充：

div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

对于其他两个div，你需要给它们一些命名类（在我的例子中为'padLeft'），它将左边的填充返回给div。

div.padLeft {
    padding-left: 15px;
}

这是一种微创方式。如果你有更多div想要填充，你可以简单地反过来，使用一个单独的div类来删除填充，并将其他填充保留为默认值。

如何在Bootstrap 3中删除列填充以获得全宽输入？

3 个答案: