所以我在向页面的某个部分应用边框和边框背景时遇到问题。我想知道如何做到这一点，我已经尝试在同一条线上制作两行并为每个行应用一个边框，但到目前为止我没有尝试过任何工作。
简化它：我的页面看起来像https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52
当我需要它时看起来像https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form" id="border">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4" id="date-picker">
<label for="dates" class="control-label">Date of Birth</label>
<select class="date-dropdown" id="day-dropdown-form">
<script>
var daylist = "";
var i;
for (i = 1; i <= 31; i++) {
daylist += "<option>" + i + "</option>";
}
document.getElementById("day-dropdown-form").innerHTML = daylist;
</script>
</select>
<select id="month-dropdown-form">
<script>
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthlist = "";
var i;
for (i = 0; i < months.length; i++) {
monthlist += "<option>" + months[i] + "</option>";
}
document.getElementById("month-dropdown-form").innerHTML = monthlist;
</script>
</select>
<select class="date-dropdown" id="year-dropdown-form">
<script>
var yearlist = "";
var i;
for (i = 2016; i >= 1900; i--) {
yearlist += "<option>" + i + "</option>";
}
document.getElementById("year-dropdown-form").innerHTML = yearlist;
</script>
</select>
</div>
<div class="col-md-4" id="submit-button-col">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
CSS
/*-- Bootstrap overrides instead of editing source LESS files --*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}
p, div {
font-family: 'Open Sans', sans-serif;
}
/*-- Custom Styling --*/
#logo {
padding: 10px;
}
#searchbox {
padding: 10px;
}
#search-input {
border: solid 1px gray;
border-radius: 8px;
background-color: #fff;
}
#search-input input {
border: 0;
box-shadow: none;
background: none;
}
#search-button {
padding: 8px;
}
#search-button button {
background: none;
border: none;
}
#login-name {
padding: 10px;
}
#login-name p {
text-align: center;
vertical-align: middle;
line-height: 50px;
float: right;
}
#settings-icon {
padding-top: 20px;
}
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
}
.navbar .nav li a {
border-right: 1px solid black;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
#detail-request {
text-align: center;
padding: 15px;
}
#banner-top-col {
width: 100%;
padding: 0;
}
#banner-bottom-col {
width: 100%;
padding: 0;
}
#banner-top {
margin: auto;
margin-bottom: 10px;
width: 100%;
height: 250px;
}
.banner-information {
position: absolute;
border: 5px solid #ff6600;
background-color: #ebebeb;
width: 400px;
height: 180px;
border-radius: 7px;
top: 12%;
text-align: center;
padding: 5px;
left: 5%;
}
.banner-information h4 {
font-size: 20px;
text-align: left;
padding-left: 5px;
padding-top: 15px;
}
.banner-information h1 {
font-size: 60px;
padding-left: 5px;
text-align: left;
font-weight: bold;
margin: 0;
}
#map-holder-image {
border: 2px solid #ff6600;
border-radius: 7px;
width: auto;
padding: 1px;
}
#email-address, #confirm-email-address, #first-name, #last-name {
width: 85%;
}
#contact-form-box {
border: 1px solid #ff6600;
width: auto;
background-color: #ebebeb;
border-radius: 7px;
}
.support-box {
border: 2px solid #ff6600;
background-color: #ebebeb;
border-radius: 7px;
text-align: center;
width: 359px;
margin-right: 18.5px;
margin-top: 10px;
display: inline-block;
right: 10px;
height: 230px;
}
.support-box h3 {
font-size: 25px;
text-align: center;
padding: 10px;
}
#support {
margin: 0 auto;
border: 0px solid #ffad41;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
font-size: 38px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #ffc579;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
text-align: center;
height: 80px;
width: 180px;
}
#support:hover {
border: 0px solid #ff9913;
background-color: #ffaf46;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
background-image: -o-linear-gradient(top, #ffaf46, #e78404);
background-image: linear-gradient(to bottom, #ffaf46, #e78404);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404);
}
#support-image {
display: inline-block;
}
#support h3 {
display: inline-block;
padding: 0;
padding-right: 15px;
font-weight: 800;
margin: 0 auto;
}
.date-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 50px center;
width: 80px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#date-picker {
height: 100px;
}
#month-dropdown-form {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 65px center;
width: 95px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#submit-button-col {
text-align: center;
margin: 0 auto;
height: 100px;
}
#submit-button {
margin: 0 auto;
margin-top: 25px;
border: 0px solid #46ec02;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #46ec02;
background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307));
background-image: -webkit-linear-gradient(top, #46ec02, #28c307);
background-image: -moz-linear-gradient(top, #46ec02, #28c307);
background-image: -ms-linear-gradient(top, #46ec02, #28c307);
background-image: -o-linear-gradient(top, #46ec02, #28c307);
background-image: linear-gradient(to bottom, #46ec02, #28c307);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307);
text-align: center;
height: 65px;
width: 200px;
margin-right: 45px;
}
#submit-button h3 {
display: inline-block;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: 800;
}
#banner-bottom {
margin: auto;
width: 100%;
height: 250px;
padding-top: 15px;
}
#footer {
background-color: #363636;
height: 250px;
}
#footer p {
color: white;
text-align: center;
vertical-align: middle;
line-height: 130px;
}
#footer-line {
border: 1px solid white;
width: 95%;
}
非常感谢：）
答案 0 :(得分：0)
确保使用所需的边框样式将#border添加到CSS中，例如： border：1px solid＃000;
如果你将div包装在父div中，那么你可以简单地向父div添加一个边框，它将出现在其中的所有div周围。
在这种情况下，为表格中的所有div添加一个边框
TRY
.form {
border:2px solid #000;
background: #eee;
}<form class="form">
<div>
<input type="text" / >
</div>
<div>
<input type="text" / >
</div>
答案 1 :(得分：0)
仅添加#map-holder-image, #border以添加#border的样式ID，请参阅此处演示...
/*-- Bootstrap overrides instead of editing source LESS files --*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}
p, div {
font-family: 'Open Sans', sans-serif;
}
/*-- Custom Styling --*/
#logo {
padding: 10px;
}
#searchbox {
padding: 10px;
}
#search-input {
border: solid 1px gray;
border-radius: 8px;
background-color: #fff;
}
#search-input input {
border: 0;
box-shadow: none;
background: none;
}
#search-button {
padding: 8px;
}
#search-button button {
background: none;
border: none;
}
#login-name {
padding: 10px;
}
#login-name p {
text-align: center;
vertical-align: middle;
line-height: 50px;
float: right;
}
#settings-icon {
padding-top: 20px;
}
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
}
.navbar .nav li a {
border-right: 1px solid black;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
#detail-request {
text-align: center;
padding: 15px;
}
#banner-top-col {
width: 100%;
padding: 0;
}
#banner-bottom-col {
width: 100%;
padding: 0;
}
#banner-top {
margin: auto;
margin-bottom: 10px;
width: 100%;
height: 250px;
}
.banner-information {
position: absolute;
border: 5px solid #ff6600;
background-color: #ebebeb;
width: 400px;
height: 180px;
border-radius: 7px;
top: 12%;
text-align: center;
padding: 5px;
left: 5%;
}
.banner-information h4 {
font-size: 20px;
text-align: left;
padding-left: 5px;
padding-top: 15px;
}
.banner-information h1 {
font-size: 60px;
padding-left: 5px;
text-align: left;
font-weight: bold;
margin: 0;
}
#map-holder-image, #border {
border: 2px solid #ff6600;
border-radius: 7px;
width: auto;
padding: 1px;
}
#email-address, #confirm-email-address, #first-name, #last-name {
width: 85%;
}
#contact-form-box {
border: 1px solid #ff6600;
width: auto;
background-color: #ebebeb;
border-radius: 7px;
}
.support-box {
border: 2px solid #ff6600;
background-color: #ebebeb;
border-radius: 7px;
text-align: center;
width: 359px;
margin-right: 18.5px;
margin-top: 10px;
display: inline-block;
right: 10px;
height: 230px;
}
.support-box h3 {
font-size: 25px;
text-align: center;
padding: 10px;
}
#support {
margin: 0 auto;
border: 0px solid #ffad41;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
font-size: 38px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #ffc579;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
text-align: center;
height: 80px;
width: 180px;
}
#support:hover {
border: 0px solid #ff9913;
background-color: #ffaf46;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
background-image: -o-linear-gradient(top, #ffaf46, #e78404);
background-image: linear-gradient(to bottom, #ffaf46, #e78404);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404);
}
#support-image {
display: inline-block;
}
#support h3 {
display: inline-block;
padding: 0;
padding-right: 15px;
font-weight: 800;
margin: 0 auto;
}
.date-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 50px center;
width: 80px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#date-picker {
height: 100px;
}
#month-dropdown-form {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 65px center;
width: 95px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#submit-button-col {
text-align: center;
margin: 0 auto;
height: 100px;
}
#submit-button {
margin: 0 auto;
margin-top: 25px;
border: 0px solid #46ec02;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #46ec02;
background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307));
background-image: -webkit-linear-gradient(top, #46ec02, #28c307);
background-image: -moz-linear-gradient(top, #46ec02, #28c307);
background-image: -ms-linear-gradient(top, #46ec02, #28c307);
background-image: -o-linear-gradient(top, #46ec02, #28c307);
background-image: linear-gradient(to bottom, #46ec02, #28c307);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307);
text-align: center;
height: 65px;
width: 200px;
margin-right: 45px;
}
#submit-button h3 {
display: inline-block;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: 800;
}
#banner-bottom {
margin: auto;
width: 100%;
height: 250px;
padding-top: 15px;
}
#footer {
background-color: #363636;
height: 250px;
}
#footer p {
color: white;
text-align: center;
vertical-align: middle;
line-height: 130px;
}
#footer-line {
border: 1px solid white;
width: 95%;
}<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form" id="border">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4" id="date-picker">
<label for="dates" class="control-label">Date of Birth</label>
<select class="date-dropdown" id="day-dropdown-form">
<script>
var daylist = "";
var i;
for (i = 1; i <= 31; i++) {
daylist += "<option>" + i + "</option>";
}
document.getElementById("day-dropdown-form").innerHTML = daylist;
</script>
</select>
<select id="month-dropdown-form">
<script>
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthlist = "";
var i;
for (i = 0; i < months.length; i++) {
monthlist += "<option>" + months[i] + "</option>";
}
document.getElementById("month-dropdown-form").innerHTML = monthlist;
</script>
</select>
<select class="date-dropdown" id="year-dropdown-form">
<script>
var yearlist = "";
var i;
for (i = 2016; i >= 1900; i--) {
yearlist += "<option>" + i + "</option>";
}
document.getElementById("year-dropdown-form").innerHTML = yearlist;
</script>
</select>
</div>
<div class="col-md-4" id="submit-button-col">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>