0
Ich habe ein zweispaltiges Bootstrap-Layout. In der linken Spalte befindet sich eine Akkordeon-Navigation, und auf der rechten Seite befindet sich der Hauptinhalt.Bootstrap-Layout Inhalt Formularelemente erstrecken sich außerhalb der Spalte
Die linke Navigation sollte feste Breite haben (bevor sie den Breakpoint erreicht) aber reaktionsbereit bleiben und der Hauptinhalt sollte nur reaktionsfähig bleiben.
Mein Problem ist, dass meine Tasten auf der rechten Seite scheint außerhalb der Spalte der Wand zu erstrecken. Die Buttons haben eine feste Breite und eine absolute Position, aber wie kann ich sie ändern, so dass sie sich nicht über die Spalte hinaus erstrecken?
Die .container Breite soll eine Breite von 1530px haben, aber aus irgendeinem Grund implementiert es diesen Stil nicht.
hier ist ein codepen: codepen.io/krystyna93/pen/PNrZjz
body {
background-color: #aaa;
}
html {
background-color: #aaa;
}
/* General styles */
.container {
background-color: #000;
width: 1530px;
margin: 0 auto;
}
.row.header {
color: #fff;
border-bottom: 6px solid #fff
}
.row.header h1 {
padding: 30px 0;
font-size: 3.5em;
font-weight: 300;
}
h2 {
color: #fff;
font-size: 2.5em;
padding: 0;
}
h3 {
color: #f47929;
font-size: 2em;
padding-bottom: 10px;
}
.headers {
margin: 50px 0 30px 0;
}
.headers h1 {
padding-top: 20px;
}
.headers p {
font-size: 1.6em;
color: #fff;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* nav sidebar */
.sidebar {
padding: 0;
margin: 0;
background-color: #fff;
}
.panel {
border-radius: 0 !important;
border: 0;
font-weight: 400 border: 0;
}
.panel-group {
border-radius: 0;
/*box-shadow: 1px 1px 3px #074f68;*/
border: 0;
background-color: #fff
}
.panel-heading h4.panel-title {
border-radius: 0;
/*box-shadow: 1px 1px 3px #074f68;*/
border: 0;
background-color: #fff;
}
.panel-heading h4.panel-title a:link {
margin-left: 10px;
text-decoration: none;
font-weight: bold;
font-size: 1.5em border: 0;
}
.panel-heading h4.panel-title a:active {
color: #fff border: 0;
}
.panel-heading h4.panel-title a:hover {
color: #f47929
}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc;
border-top: 0;
border-left: 0;
border-right: 0;
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff;
border: 0;
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0 border: 0;
}
.panel-body ul li {
padding: 10px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.4em;
border-left: 0;
border-right: 0;
}
.panel-body ul li:last-child {
border-bottom: 0;
}
.panel-body ul a {
color: #1f1f1f
}
.panel-body ul li a:link {
margin-left: 40px !important;
color: #1f1f1f
}
.panel-body ul li a:active {
color: #fff
}
.panel-body ul li a:hover {
text-decoration: none;
color: #f47929
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}
.panel-heading.collapsed {
background-color: #222222
}
/* form elements */
.form-horizontal .form-group {
padding: 0 15px;
}
.form-horizontal .form-group .custom-label {
text-align: left;
padding-left: 0;
margin-top: -10px;
font-size: 1.7em;
font-weight: normal;
color: #fff;
}
.form-horizontal .form-group .form-control {
background-color: #222;
border: 0;
color: #fff;
padding: 0px 10px;
border-radius: 3px;
}
.form-horizontal .form-group .input-text {
font-size: 1.3em;
color: #fff;
}
.form-horizontal .form-group .form-control:focus {
border-color: #fff;
}
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret {
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
.form-group.social .col-md-2 {
padding: 0;
margin: 0;
}
.form-group.social .col-md-2 .fa-instagram {
font-size: 1.1em;
}
.changePswrd {
padding: 3px 0 0 12px;
}
.changePswrd a:link {
font-size: 1.3em;
color: #fff;
display: inline-block;
}
.changePswrd a:hover {
text-decoration: none;
color: #F47929;
}
/* TOGGLE/SWITCH INPUT BUTTONS */
.toggle-input-btn {
width: 200px;
height: 38px;
/* top: 50%; */
left: 20%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-two {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.3em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-three {
width: 200px;
height: 38px;
left: 60%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.3em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-four {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-five {
width: 200px;
height: 38px;
left: 10%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-six {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-seven {
width: 200px;
height: 38px;
left: 10%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* \t -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.toggle-input-btn div,
.toggle-input-btn-two div,
.toggle-input-btn-three div,
.toggle-input-btn-four div,
.toggle-input-btn-five div,
.toggle-input-btn-six div,
.toggle-input-btn-seven div {
width: 100px;
height: 80%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 3px;
}
.toggle-input-btn div,
.toggle-input-btn-three div,
.toggle-input-btn-six div,
.toggle-input-btn-seven div {
border: 2px solid #aaa;
}
.toggle-input-btn-two div,
.toggle-input-btn-four div,
.toggle-input-btn-five div {
border: 2px solid #b3b3b3;
}
/* footer section */
.form-group.action-btns button {
margin: 50px 0 60px 20px;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #fff;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #0099cc;
color: #0099cc;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #33a6cc;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
/* CUSTOM SUBMISSION BTN VALUES */
.btn-primary {
padding: 14px 24px;
border: 0 none;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Main Header</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne">
\t \t \t \t \t \t \t Page Link
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">
\t \t \t \t \t \t \t Another Page Link
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">
\t \t \t \t \t \t \t Another Page Title
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFour">
\t \t \t \t \t \t \t Another Page Link
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">
\t \t \t \t \t \t \t Another Page Link
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">
\t \t \t \t \t \t \t Another Page Link
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="row col-md-10 content">
<div class="account-wrap">
<h2>Page Title</h2>
<h3>General</h3>
<div class="form-horizontal" role="form" action="/profileDetails" method="post">
<!-- <div class="col-sx-12"> -->
<div class="form-group row">
<label for="fname" class="col-md-2 hidden-xs hidden-sm control-label custom-label">First name</label>
<div class="col-md-8 col-xs-12 col-sm-12">
<input type="text" class="form-control input-text" id="inputfname" placeholder="First Name" focus>
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="Last Name">
</div>
</div>
<div class="form-group row clearfix">
<label for="email" class="col-md-2 hidden-xs hidden-sm control-label custom-label ">Email</label>
<div class="col-md-8 col-xs-12 col-sm-12 clearfix">
<input type="text" class="form-control input-text" id="email" placeholder="Email">
</div>
<div class="switch col-md-1 col-xs-12 col-sm-12 ">
<div class="toggle-input-btn clearfix">
<div class="slider"></div>
<span class="private">Private</span>
<span class="public selected">Public</span>
</div>
</div>
</div>
<div class="form-group row clearfix">
<label for="password" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Password</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="password" placeholder="************">
</div>
<div class="col-md-2 changePswrd">
<a href="changePswrd" class="changePswrd">Change Password</a>
</div>
</div>
<div class="form-group row">
<label for="language" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Language</label>
<div class="col-md-8">
<a class="btn btn-default dropdown-toggle btn-select col-xs-12 col-sm-12" data-toggle="dropdown" href="#">English (Australia) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">English</a>
</li>
<li><a href="#">Japanese</a>
</li>
<!-- <li class="divider"></li>
\t \t \t \t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Gender</label>
<div class="col-md-2 col-sm-12">
<div class="toggle-input-btn-two">
<div class="slider-two"></div>
<span class="male">Male</span>
<span class="female selected">Female</span>
</div>
</div>
<div class="col-md-5">
<a class="btn btn-default dropdown-toggle btn-select gender" data-toggle="dropdown" href="#">Other <span class="caret"></span></a>
<ul class="dropdown-menu inline">
<li><a href="#">gender</a>
</li>
<li><a href="#">gender</a>
</li>
<!-- <li class="divider"></li>
\t \t \t \t \t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-three">
<div class="slider-three"></div>
<span class="private3">Private</span>
<span class="public3 selected">Public</span>
</div>
</div>
</div>
<div class="form-group">
<h3>Address</h3>
<label for="unit" class="col-md-2 control-label custom-label">Unit number</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="unitNumber" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 control-label custom-label">Street number</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="streetNumber" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 control-label custom-label">Street name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="streetName" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 control-label custom-label">Suburb</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="suburb" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 control-label custom-label">Postcode</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="zip" placeholder="3000">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 control-label custom-label">State</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="state" placeholder="VIC">
</div>
</div>
<div class="form-group">
<label for="country" class="col-md-2 control-label custom-label">Country</label>
<div class="btn-group col-md-8">
<a class="btn btn-default dropdown-toggle btn-select col-md-12" data-toggle="dropdown" href="#">Australia<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">etc</a>
</li>
<li><a href="#">etc</a>
</li>
<!-- <li class="divider"></li>
\t \t \t \t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
</div>
<div class="headers">
<h3>Page Title</h3>
</div>
<div class="form-group social">
<div class="col-md-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="">
</div>
<div class="col-md-2">
<div class="toggle-input-btn-four">
<div class="slider-four"></div>
<span class="private4">Private</span>
<span class="public4 selected">Public</span>
</div>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-five">
<div class="slider-five"></div>
<span class="no">No</span>
<span class="yes selected">Yes</span>
</div>
</div>
</div>
<div class="form-group social">
<div class="col-md-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="">
</div>
<div class="col-md-2">
<div class="toggle-input-btn-six">
<div class="slider-six"></div>
<span class="private6">Private</span>
<span class="public6 selected">Public</span>
</div>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-seven">
<div class="slider-seven"></div>
<span class="no2">No</span>
<span class="yes2 selected">Yes</span>
</div>
</div>
</div>
<div class="form-group action-btns pull-right">
<div class="row">
<button type="button" class="btn btn-primary btn-lg outline"><span class="glyphicon glyphicon-remove-circle"></span>Cancel</button>
<button type="button" class="btn btn-primary btn-lg outline"><span class="glyphicon glyphicon-ok-circle"></span>Save</button>
</div>
</div>
</div>
<!-- end of form -->
</div>
</div>
</div>
<!-- end of container -->
Ich sehe keine Probleme mit den Tasten. Welchen Browser benutzen Sie? Kannst du einen Screenshot hochladen? – Arerrac
Ich habe einen Codepen hinzugefügt, und werfen Sie einen Blick auf das Snippet in der vollständigen Seitenansicht, Sie können auf der rechten Seite der Spalte – Krys
ich meine Antwort aktualisiert. Hat das geholfen? – Arerrac