html - 将页面大小调整到 1200 像素以下会导致内容移动

标签 html css twitter-bootstrap-3

我对网络开发还是个新手，并且处于这个元素的开始阶段。我现在的问题是，当我将显示尺寸调整到 1200 像素以下时，左侧第二个表格的内容会发生变化。 TEXT 的内容从 2 行更改为 3 行，并使底部部分比右侧延伸得更远。试图找到一种方法来在页面调整大小时使内容保持在底部。 

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
	)
}
.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;
}
<!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="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <link rel="stylesheet" href="style.css">


    <title>Mailbox Creator</title>
  </head>


  <div class="container">


    <nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mailbox Management <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">User Mailbox Management</a></li>
            <li><a href="#">Resource Mailbox Management</a></li>
            <li><a href="#">Mailbox Update Management</a></li>            
          </ul>
        </li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Hello $username</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



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

  <!--  ***************************************** -->
  <!--  **********  Automatic Forms ************* -->
  <!--  ***************************************** -->
  <div class="container">
  <div class="row">
    <div class="col-md-6 automatic">
      <form>
        <!-- <div class="form-group text-center">
          <label><u>Automatic</u></label>
        </div> -->
        <h4 class="text-center pb-2"><u>Automatic</u></h4>
        <div class="form-group row">
          <label class="col-md-3 col-form-label 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 ml-2" for="emailCheckAutomatic" style="min-width: 140px">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>
        <!-- <div class="form-group text-center">
          <label><u>Manual</u></label>
        </div> -->
        <h4 class="text-center pb-2"><u>Manual</u></h4>
        <div class="form-group row">
          <label class="col-md-1 col-form-label ml-1 " 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">
            <button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
          </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>




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

最佳答案

Account Name 太长，所以如果您向该元素添加 padding-right:0;，它将有足够的空间。

在整页模式下检查我的代码段。

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
	);
}
.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="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <link rel="stylesheet" href="style.css">


    <title>Mailbox Creator</title>
  </head>


  <div class="container">


    <nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mailbox Management <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">User Mailbox Management</a></li>
            <li><a href="#">Resource Mailbox Management</a></li>
            <li><a href="#">Mailbox Update Management</a></li>            
          </ul>
        </li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Hello $username</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



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

  <!--  ***************************************** -->
  <!--  **********  Automatic Forms ************* -->
  <!--  ***************************************** -->
  <div class="container">
  <div class="row">
    <div class="col-md-6 automatic">
      <form>
        <!-- <div class="form-group text-center">
          <label><u>Automatic</u></label>
        </div> -->
        <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 ml-2" for="emailCheckAutomatic" style="min-width: 140px">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>
        <!-- <div class="form-group text-center">
          <label><u>Manual</u></label>
        </div> -->
        <h4 class="text-center pb-2"><u>Manual</u></h4>
        <div class="form-group row">
          <label class="col-md-1 col-form-label ml-1 " 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">
            <button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()">Check</button>
          </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>




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

关于html - 将页面大小调整到 1200 像素以下会导致内容移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49284808/

上一篇：html - 垂直对齐嵌套内容

下一篇：html - 元素中包含位置粘性？

相关文章：

html - 如何在 masonry 网格中居中图像？

css - 如何为crossrider中 'appAPI.openURL'打开的html页面设置css

html - WebRTC - 禁用所有音频处理

javascript - 测量同级元素的总高度

jquery - 滑出式菜单 - 在过渡时隐藏水平滚动条

jquery - 如何将垂直滚动条添加到 Bootstrap 工具提示中显示的图像？

twitter-bootstrap-3 - 在 Twitter Bootstrap 3 中组织 3 列到 2 列

twitter-bootstrap - css 和 bootstrap 中的类 "responsive"

css - 带有蓝图 CSS 的 HTML5 样板

html - 每个浏览器渲染 css 的方式不同吗？

©2024 IT工具网  联系我们