我仍然是web dev的新手，并且正处于这个项目的开始阶段。我现在的问题是，当我的显示器大小调整到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>
答案 0 :(得分：0)
帐户名称太长，因此如果您向该元素添加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>