[英]Issues wrapping border round a group of divs in bootstrap
So I am having issues applying a border and a border background to a section of my page. 因此,我在页面的一部分上应用边框和边框背景时遇到问题。 I was wondering how I could do this, I've tried make two rows on the same line and apply a border to each but so far nothing I've tried has worked. 我想知道如何做到这一点,我尝试在同一行上制作两行并为每行应用边框,但到目前为止,我尝试过的任何方法都没有奏效。
To simplify it: My page looks like this https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52 为了简化它:我的页面看起来像这样https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52
When I need it to look like this https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a 当我需要它看起来像这样https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a
HTML 的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 的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%;
}
Thanks a lot :) 非常感谢 :)
Make sure to add #border to your CSS with the required border styles such as: border: 1px solid #000; 确保使用所需的边框样式将#border添加到CSS中,例如:border:1px solid#000;
If you wrap your divs within a parent div then you can simply add a border to the parent div and it will appear around all divs within it. 如果将div包装在父div内,则只需在父div上添加边框,边框就会出现在其中的所有div周围。
In this case to add a border round all the divs within the form 在这种情况下,在表格中的所有div周围添加边框
TRY 尝试
.form { border:2px solid #000; background: #eee; }
<form class="form"> <div> <input type="text" / > </div> <div> <input type="text" / > </div>
Add only #map-holder-image, #border
as to add style id of #border
see demo here... 仅添加#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.