1
Kann jemand bitte helfen Sie mir mit meinem Bootstrap-Layout.Bootstrap benutzerdefinierte Layout rechte Spalte Verpackung unter der linken Spalte
Bevor der Browser Breakpoint 980px erreicht, wird die rechte Spalte unterhalb der linken Spalte umbrochen, aber ich möchte, dass sie in ihrer Position bleibt, ohne dass ein Wrapping passiert.
Die Sache ist, ich brauche auch die linke Spalte, um eine feste Breite und die rechte Spalte zu haben keine feste Breite, aber möglicherweise in der Lage, die Breite der Elemente in meiner Form zu verringern, so dass sie nicht einander überlappen Browser/Ansichtsfenster wird in der Größe verändert (Meine horizontale Form hat mehr Elemente innerhalb derselben Linien, aber ich habe einige dieser überlappenden Elemente weggelassen, um für diese Frage minimal zu bleiben).
Ich denke nicht, meine Form Gruppenelemente die richtigen col Größen haben ...
Ich wünsche Medienanfragen verwenden, um diese (Mine wird derzeit ein wenig arbeiten) zu bekommen, also wenn jemand in spielen kann meine codepen, die sehr hilfreich sein würde :)
ich habe einen Link, den Sie mein Layout hier ändern können: http://codepen.io/krystyna93/pen/GZzqrq
body {
background-color: #ccc;
}
/* General styles */
.container {
background-color: #bbb;
font-family: arial, verdana, sans-serif;
width: 1530px;
margin: 0 auto;
}
/* Large desktop */
@media and screen (max-width: 1590px) {
.container {
width: auto;
}
}
@media and screen (min-width: 981px) and (max-width: 1530px) {
.accordion.sidebar {
width: 230px;
}
}
@media (min-width: 980px) {
.accordion.sidebar {
min-width: 200px;
max-width: 200px;
}
}
.col-md-10 {
border-left: 1px solid #4d4d4d;
padding: 0;
margin: 0;
}
.container .row.header {
color: #fff;
border-bottom: 6px solid #fff
}
.container .row.header h1 {
padding: 30px 0;
font-size: 3.5em;
font-weight: 300;
}
h2 {
color: #fff;
font-size: 32px;
}
h3 {
color: #ccc;
font-size: 30px;
padding-bottom: 10px;
}
h3.inner {
padding-left: 15px;
}
h4 {
color: #ccc;
font-size: 22px;
}
.headers {
border-top: 1px solid #ccc;
margin-top: 50px;
margin-bottom: 30px;
}
.headers h1 {
padding: 20px 0 0 0;
}
.headers p {
font-size: 1.6em;
color: #fff;
padding: 0 0 10px 0;
margin: 0;
}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.accordion.sidebar {
padding: 0;
background-color: #fff;
}
.panel {
border-radius: 0 !important;
border: 0;
font-family: 'Lato', Arial, sans-serif;
font-weight: 400
}
.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: 20px
}
.panel-heading h4.panel-title a:active {
color: #fff
}
.panel-heading h4.panel-title a:hover {
color: #FF5500
}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0
}
.panel-body ul li {
padding: 10px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.4em
}
.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: #FF5500
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}
.panel-heading.collapsed {
background-color: #222222
}
/* ******** FORM STYLING ***********
************************************
*/
.form-horizontal .form-group .custom-label {
text-align: left;
margin-top: -10px;
font-size: 22px;
font-weight: normal;
color: #fff;
}
.form-horizontal .form-group .form-control {
background-color: #4d4d4d;
border-color: #4d4d4d;
color: #fff;
border-radius: 3px;
}
.form-horizontal .form-group .input-text {
font-size: 1.3em;
color: #fff;
}
.form-horizontal .form-group .form-control:hover {
background-color: #34383C;
border: 1px solid #4d4d4d;
}
.form-horizontal .form-group .form-control:focus {
border: 1px solid #FF5500;
}
/* DROPDOWN MENU STYLING */
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret {
/* position: absolute; right: 12px; top: calc(50% - 2px); */
background-image: url('arr.jpg');
background-repeat: no-repeat;
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
.form-group.social .col-md-2 {
padding: 0;
margin: 0;
width: 200px;
}
.form-group.social .col-md-2 .fa-instagram,
.form-group.social .col-md-2 .fa-twitter {
font-size: 1.1em;
padding: 0 5px 0 20px;
}
.changePswrd {
padding: 3px 0 0 12px;
}
.changePswrd a:link {
font-family: 'Lato', verdana, sans-serif;
font-size: 1.3em;
color: #fff;
display: inline-block;
}
.changePswrd a:hover {
text-decoration: none;
color: #FF5500;
}
.form-group .placeholder-img.col-md-2 {
height: 320px;
width: 230px;
background-color: #4d4d4d;
margin: 0 20px;
}
.form-group .placeholder-img-thumb {
height: 320px;
}
.form-group .placeholder-img-thumb .thumb-img {
text-align: center;
width: 130px;
}
.form-group .placeholder-img-thumb .circle {
width: 130px;
height: 130px;
background: #4d4d4d;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.form-group .placeholder-img-thumb .caption {
width: 100%;
color: #fff;
}
.form-group .profile-photo-help.col-md-4 {
width: 200px;
}
.form-group .profile-photo-help {
width: 280px;
color: #fff;
}
.form-group .profile-photo-help p {} .form-group .profile-photo-help a:link {
color: #FF5500;
text-decoration: none;
}
.form-group .profile-photo-help a:hover {
color: #fff;
}
.form-group .create-card-btn .glyphicon-plus {
font-size: 0.9em;
padding: 0 10px 0 0;
}
.form-group .input-group.date span.input-group-addon {
background-color: #4d4d4d;
color: #fff;
border: none;
border-radius: 3px;
border-color: none;
}
.form-group .input-group.date .form-control.date {
font-size: 1.2em;
}
.form-group .strength-delete-btn .glyphicon-minus {
font-size: 0.9em;
padding: 0 5px 0 0;
}
/* SUBMISSION BUTTONS */
.submission {
background-color: #333333;
border-top: 1px solid #4d4d4d;
margin-top: 80px;
padding-top: 40px;
padding-bottom: 40px;
}
.submission button {
border-radius: 3px;
font-size: 1.5em;
border: none;
}
.submission .glyphicon-remove-circle,
.submission .glyphicon-ok-circle {
font-size: 1.6em;
font-weight: 400;
vertical-align: middle;
padding: 0 5px;
color: #fff;
}
.submission .btn-cancel {
margin-right: 20px;
background-color: #4d4d4d;
}
.submission .btn-save {
background-color: #aaa;
}
.submission .action-btns .btn-primary:hover,
.submission .action-btns .btn-primary.outline:focus,
.btn-primary:active {
color: #33a6cc;
border-color: #fff;
}
.submission .action-btns .btn-primary:active,
.submission .action-btns .btn-primary.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn.outline.upload {
position: absolute;
bottom: 0;
padding: 5px 40px 5px 40px;
}
.btn.outline.football {
background: none;
padding: 5px 22px;
margin-right: 20px;
}
.btn.outline.create-card-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.sizing-guide-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.strength-delete-btn {
background: none;
padding: 5px 22px;
width: 100%
}
.btn.outline.add-result-btn {
background: none;
padding: 5px 22px;
margin-top: 15px;
}
.btn-primary.outline {
border: 1px solid #fff;
color: #fff;
font-family: 'Lato', verdana, sans-serif;
font-size: 1.1em;
}
.btn-primary.outline.strength-delete-btn {
border: 1px solid #4d4d4d;
color: #4d4d4d;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #FF5500;
border-color: #F47929;
}
.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;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Heading 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 accordion sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne"> Link 1 </a>
\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 <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">Title 2</a>
\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 <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">Title 3</a>
\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>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">Title 4</a>
\t \t \t </h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">Title 5
\t \t \t </a>
\t \t \t </h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="container load">
<div class="col-lg-10">
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<h2>Page Title</h2>
<div class="form-horizontal" role="form" action="/details" method="post">
<div class="form-group">
<h3 class="inner">General</h3>
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="" placeholder="title" focus>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Information</h3>
<p>
Info titletitletitletitletitletitletitletitletitle</br>
titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle
</p>
</div>
<div class="form-group">
<h3 class="inner">Address</h3>
<label for="unit" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="25">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="streetName" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="suburb" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="zip" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="state" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Social Networks</h3>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle">
</div>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle">
</div>
</div>
<div class="row submission">
<div class="form-group btn-block">
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button>
<button type="button" class="btn btn-default btn-lg btn-save">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end of form -->
</div>
</div>
<!-- end of row -->
<!-- </div> end of container -->
</div>
</div>
</div>
<!-- end of container -->
vielen Dank! Bei voller Browsergröße ist die Breite meines Containers jedoch nicht 1530px, sondern scheint die Bootstrap-Standardbreite zu verwenden. Wie stelle ich sicher, dass meine benutzerdefinierten 1530px für meinen Container benötigt werden? – Krys
es scheint die Breite für den Wrapper, wenn es am kleineren Haltepunkt nicht 100% Breite mit der Navigation ist, nimmt es die gesamte Breite des Containers, wie repariere ich das auch ?? – Krys
Kannst du mir bei meiner Frage helfen, die ich gerade gestellt habe, oder wenn jemand könnte? Ich bin irgendwie verzweifelt, um das zu beheben ...... – Krys