为什么嵌套的行/列扩展到容器之外

时间：2018-03-15 00:23:58

标签： twitter-bootstrap bootstrap-4

仍在学习网络开发，所以这是我的问题。我想知道为什么在我的布局的最开始使用容器类，并且当添加具有两个Col-md-6列的行时，内容扩展到容器之外。内部形状的两列延伸过两侧的超大管。只是困惑。我想如果我添加另一个容器，它甚至会全部出来。只是不知道为什么需要这样做。

var toggle = function(){
	var exists = document.querySelector("#existButton");
	console.log(exists.innerHTML);


	if(exists.classList.contains("btn-warning")){
		exists.classList.remove("btn-warning");
		exists.classList.add("btn-info");
		exists.innerHTML = "copy";
		//document.getElementById("#existButton").innerHTML = 'check'
	} else {
		exists.classList.remove("btn-info");
		exists.classList.add("btn-warning");
		exists.innerHTML="check";
		//document.getElementById("#existButton").innerHTML = 'copy'
	}

	
	

}
body{
	/*background: repeating-linear-gradient(
		to right,
		#050210,
		#050210 50px,
		#271f41 50px,
		#271f41 100px
	)*/

	background-image: url(images/body_background.png); 
	
}
.jumbotron {
	margin-bottom: 0;
	background-color: #cbd0d3;

}

.container .jumbotron{
	border-radius: 0px;
}
.navbar{
	margin-bottom: 0;
	background-color: #44abe2;
	margin-top: 30px;

}

.navbar-default .navbar-nav>li>a {
	color: white;

}

.navbar .navbar-default {
	border-radius: 0px;
}

.navbar-default .navbar-brand{
	color: white;
}

.automatic {
	background-color: #6e8a99;
	padding-bottom: 40px;
	border-bottom-left-radius: 6px;
	
}

.manual {
	background-color: #83929a;
	padding-bottom: 40px;
	border-bottom-right-radius: 6px;
}

#ml-2{
  padding-right:0;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">


    <title>Mailbox Creator</title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Mailbox Management
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">User Mailbox Management</a>
                <a class="dropdown-item" href="#">Resource Mailbox Management</a>
                <a class="dropdown-item" href="#">Mailbox Update Management</a>
              </div>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link">Hello Username</a>
            </li>
          </ul>
        </div>
      </nav>


      <div class="jumbotron">
        <h1 class="text-center">Mailbox Creator Pro</h1>
      </div>



      <div class="row ">
        <!--  ***************************************** -->
        <!--  **********  Automatic Form  ************* -->
        <!--  ***************************************** -->
        <div class="col-md-6 automatic">
          <form>        
            <h4 class="text-center pb-2"><u>Automatic</u></h4>
            <div class="form-group row">
              <label class="col-md-3 col-form-label" id="ml-2" for="accountName">Account Name</label>
                <div class="col-md-6">
                  <input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number">
                </div>  
                <div class="col-md-2">
                  <button type="submit" class="btn btn-success btn-sm ">Create</button>
                </div>
            </div>    
          </form>
          <form>
            <div class="form-group row">
              <label class="col-md-3 col-form-label"  id="ml-2" for="emailCheckAutomatic">Does account have email?</label>
              <div class="col-md-6 mt-3">
                <input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
              </div>
              <div class="col-md-2">
                <button type="submit" class="btn btn-info btn-sm mt-3">Check</button>
              </div>
            </div>
          </form>
          <textarea class="form-control form-control-sm mb-1" ></textarea>
        </div>


        <!--  ***************************************** -->
        <!--  **********  Manual Form  **************** -->
        <!--  ***************************************** -->
        <div class="col-md-6 manual">
          <form>        
            <h4 class="text-center pb-2"><u>Manual</u></h4>
            <div class="form-group row">
              <label class="col-md-1 col-form-label " for="accountName">Email</label>
              <div class="col-md-5">
                <input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email">
              </div>
              <label class="col-md-2 col-form-label" for="accountName">Account</label>
              <div class="col-md-2">
                <input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#">
              </div>
              <div class="col-md-1">
                <button type="submit" class="btn btn-success btn-sm">Create</button>
              </div>
            </div>        
          </form>      
          <form>
            <div class="form-group row">
              <label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic">Email exist?</label>
              <div class="col-md-5 mt-3">
                <input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account">
              </div>
              <div class="col-md-4 mt-3">
                <a href="#" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</a>
              </div>
              <div class="col-md-1 mt-3">
                <button type="submit" class="btn btn-warning btn-sm"  >Copy</button>
              </div>
            </div>
          </form>
          <textarea class="form-control form-control-sm mb-1" ></textarea>
        </div>

      </div><!-- End Row -->


    </div> <!--  End Container  -->



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script src="scripts/script.js"></script>
  </body>
</html>

2 个答案:

答案 0 :(得分：1)

  

为什么嵌套的行/列扩展到容器

之后

那是因为Bootstrap row通常有排水沟，即位于Bootstrap行内的每个Bootstrap列每侧的15px边距。因此，这导致外部的15px边距和列之间的30px。

要删除排水沟，请将班级no-gutters添加到该行。

要立即向列添加一些填充，可以向列添加px-3之类的间距类。 px-3表示＆＃34;水平填充3个单位＆＃34;。

答案 1 :(得分：1)

在Bootstrap中，列上的左/右填充（15px）用于创建列之间的装订线/间距（col-*）。 .row通过使用负边距（ - 15px）来抵消填充，以便任何行中的外部列（第一个/最后一个）与容器的边缘对齐（以及其他内容这页纸）。

enter image description here

在您的情况下，background-color已应用于.automatic和.manual列。因为bg颜色在列上（而不是列的内容），所以看起来列溢出了行（实际上它们就像上面对装订线所解释的那样。）

因此，为了与container中的其他项进行侧面对齐，您应该将background-color应用于列的内容而不是......

演示：https://www.codeply.com/go/s07FmLZKuY 

.automatic {
    padding-bottom: 40px;
    border-bottom-left-radius: 6px;
}

.automatic > form {
    background-color: #6e8a99;
}

.manual {
    padding-bottom: 40px;
    border-bottom-right-radius: 6px;
}

.manual > form {
    background-color: #6e8a99;
}

如果您不希望其内容与边缘相对，您可能还想在内部表单中添加填充。

更多关于Bootstrap文档中的“gutter”..

  

每列都有水平填充（称为装订线）以进行控制   他们之间的空间。然后在行上抵消该填充   利润率为负。这样，列中的所有内容都是   在视觉上对齐左侧。

相关问题
最新问题