0
私は2列のブートストラップレイアウトを持っています。 左側の列にはアコーディオンナビゲーションがあり、右側にはメインコンテンツがあります。ブートストラップのレイアウトコンテンツの要素が列の外に広がる
左のナビゲーションは固定幅である必要があります（ブレークポイントに達する前に） ですが、応答性があり、メインコンテンツは応答し続ける必要があります。
私の問題は、右側のボタンが列の壁を越えて外側に伸びているようです。ボタンは固定幅と絶対位置を持っていますが、どうやってこれらを修正して、このような列を越えて伸びないのでしょうか？
.container幅は1530pxの幅を持つと思われますが、何らかの理由でそのスタイルを実装していないとします。ここ
は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 -->
ボタンに問題はありません。どのブラウザを使用していますか？スクリーンショットを投稿できますか？ – Arerrac
私はcodepenを追加して、フルページビューでスニペットを見てください。 – Krys
私は自分の答えを更新しました。それが助けになりましたか？ – Arerrac