2

Bootstrap 3 の列のパディングを取り除くにはどうすればよいですか?

次の plunkr では、ボタンとテキスト入力が接触するようにしたいと思います: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=previewで、それぞれが div の幅全体を埋めます。左または右のパディングがないようにしてください。「pull me left」と「me too」の 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;
}

他の 2 つの div については、左パディングを div に返す名前付きクラス (私の例では「padLeft」) を指定する必要があります。

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

それはそれを行うための最小限の侵襲的な方法です。パディングが必要な場所よりも多くの div がある場合は、単にこれを逆にして、パディングを削除したい div に別のクラスを使用し、その他をデフォルトのままにします。

于 2013-09-23T02:36:41.820 に答える