2

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

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

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

有任何想法吗？

4

3 回答 3

10

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

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

于 2013-10-24T08:55:30.770 回答
0

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

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

我已经为按钮和文本输入完成了它:)你可以以同样的方式进行:)

于 2013-09-14T16:23:47.230 回答
-2

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

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

对于其他两个 div，您需要为它们提供一些命名类（在我的示例中为“padLeft”），将左侧填充返回给 div。

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

这是一种微创的方法。如果您想要填充的 div 比没有更多的 div，您只需将其反转，使用一个单独的 div 类来删除您想要填充的 div，并将其他的保留为默认值。

于 2013-09-23T02:36:41.820 回答