Question

我在bootstrap中有关于容器类的问题。我使用col-md-4网格系统为文章负责人创建了主题（如下图所示）。

图片：http://imgim.com/boot1.png

但我想用额外的课程为每个“文章头”div提供背景颜色。然后我得到了这个（下图）

图片：http://imgim.com/boot2.png

容器类有自己的填充（从左到右是15px）。在这种情况下，当我应用背景颜色时，div颜色溢出外部。

bootstrap是制作响应式网站的好方法，但在这种情况下我在主题设计方面遇到了问题。

有什么想解决这个问题吗？

Answer 1

padding is the space between the content and the border

查看您的图像文件，您可能编写了类似这样的内容

<div class="container"> <div class="row"> <div class="col-sm-3 clrclass">some content</div> <div class="col-sm-3 clrclass">some content</div> <div class="col-sm-3 clrclass">some content</div> </div> </div>

改为使用col-sm-3中的div类，如此

<div class="row"> <div class="col-sm-3"><div class="clrclass">some content</div></div> <div class="col-sm-3"><div class="clrclass">some content</div></div> <div class="col-sm-3"><div class="clrclass">some content</div></div> </div>

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
      <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
      <style>
      </style>
  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs" style="padding-left:0px; padding-right:0px">
                <img src="http://localhost:1038/Images/login.jpg" class="img-responsive" alt="Login.jpg" width="100%"/>
            </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                       <div class="row">
                             <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-lg-offset-10 col-md-offset-10 col-sm-offset-9 col-xs-offset-4">
                                <img src="http://localhost:1038/Images/sahil.jpg" class="img-responsive" alt="Sahil.jpg" width="100%"/>

                             </div> 
                        </div>
                        <div class="row">
                                <div class="col-lg-pull-5 col-md-pull-5 col-sm-pull-5 col-xs-4 col-xs-offset-4 col" style="background-color:red;">
                                <form name="form1" method="post" class="form-group">
                                <div class="label">Username</div>
                                <input type="email"  class="form-control" />
                                <div class="label">Password</div>
                                <input type="password"  class="form-control" />
                                <br />
                                <input type="submit" value="Login" class="form-control btn-primary" />
                                </form>
                          </div>
                   </div>                    
            </div>
        </div>
   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  </body>
</html>

Bootstrap网格系统

2 个答案: