0
Ich erstellen eine Webseite im Bootstrap mit dem Grid-System, aber mit Problemen mit den Spalten Daten. Die Container reagieren, aber die Daten im Inneren sind nicht. Wie kann ich dieses Problem lösen? Bitte sagen Sie mir, was mir fehlt und was Problem ist es ... Thanks a lotWie behandelt man Daten im Grid-System in Bootstrap
auf Desktop-Ansicht
in der mobilen Ansicht
Hier ist mein aller Code ...
/* CSS Document */
/*background--start-*/
body {
background: url(images/drinks.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*background--end-*/
/*Logo-- start--*/
.hit-the-floor {
color: #fff;
font-size: 6em;
margin-top: 20px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor {
text-align: center;
}
.hit-the-floor1 {
color: #fff;
font-size: 4em;
margin-left: 300px;
margin-top: -50px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor1 {
text-align: center;
}
/*Logo--End--*/
/*navbar start*/
.nav_custom {
margin: 0 auto;
width: 950px;
height: 60px;
position: relative;
text-align: center;
}
.nav > li {
margin-right: 10px;
background: #000000;
opacity: 0.5;
width: 130px;
}
/*navbar end*/
/*location start*/
#b {
margin: 0 auto;
}
.location {
width: 87%;
height: 45px;
background-color: #C1BEBE;
margin-bottom: 20px;
margin: 0 auto;
}
/*Location end*/
.boddy {
width: 100%;
height: 800px;
}
/* Left Side bar*/
.left-sidebar {
float: left;
width: 200px;
height: 800px;
position: fixed;
}
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #03FE91;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #26C17E;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #26C17E;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #000000;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #26C17E;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
/*end left side bar*/
.MainArea {
width: 1148px;
height: 800px;
margin-left: 200px;
margin-top: -20px;
}
/* search start */
.search {
width: 87%;
height: 55px;
background-color: #8F8B8B;
margin-top: -20px;
margin: 0 auto;
padding-top: 5px;
padding-left: 10px;
}
#webdesigntuts-workshop:after {
content: '';
display: block;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}
#webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}
#webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}
#webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}
#webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 42px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
#ie #webdesigntuts-workshop input {
line-height: 40px;
}
#webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}
#webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
#webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
color: #efe;
outline: none;
}
#webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}
#webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}
#webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
#webdesigntuts-workshop button:hover,
#webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
#webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
@-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
@-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
@-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
@-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
/*search end*/
.item-data {
width: 942px;
height: 800px;
background-color: #000000;
}
.item {
width: 942px;
height: 140px;
background-color: #4B3939;
border-bottom: #FFFFFF 1px solid;
padding-top: 20px;
}
.image-size {
background: url(images/jalal.jpg);
background-repeat: no-repeat;
width: 120px;
height: 95px;
border: #FFFFFF 1px solid;
box-shadow: #000000;
margin-left: 20px;
}
.text {
font-size: 18px;
color: #000000;
margin-left: 150px;
margin-top: -95px;
}
.text1 {
font-size: 12px;
color: #000000;
margin-left: 150px;
}
.rate_bar {
width: 150px;
height: 40px;
background-color: #FFFFFF;
margin-left: 400px;
margin-top: -55px;
}
article {
width: 60%;
height: 30%;
margin: 0 auto;
}
.p2 {
color: #FFFFFF;
font-size: 50px;
text-align: center;
}
.circle-area {
width: 1200px;
height: 180px;
margin: 0 auto;
position: static;
margin-top: 150px;
}
.myimg {
margin-top: 15px;
opacity: 1;
}
.circle {
float: left;
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid #000000;
border-radius: 75px;
margin-left: 170px;
margin-top: 10px;
}
.circle:hover {
width: 150px;
height: 150px;
padding: 0px;
border: 2px solid #000000;
border-radius: 75px;
}
.small {
width: 120px;
height: 120px;
background-color: #2F9615;
border-radius: 60px;
}
.small:hover {
width: 150px;
height: 150px;
transform: scale(1);
background-color: #2F9615;
border-radius: 75px;
}
footer {
background-color: #000000;
margin-top: 27px;
opacity: .6;
width: 100%;
height: 60px;
position: absolute;
}
p {
color: #FFFFFF;
margin-left: 2px;
}
.p1 {
text-align: center;
color: #FFFFFF;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>deals</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<script src="bootstrap-3.3.6-dist/js/jquery-2.2.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<!-- sidebar script-->
<script src="script.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<p class="hit-the-floor">Restaurant</p>
<p class="hit-the-floor1">Hunt</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="nav_custom">
<nav class="navbar" >
<div class="container-fluid">
<div class="navbar-header form-group">
<select class="navbar-toggle collapsed selectpicker
form-control" \t data-toggle="collapse" data-target="#hafiz"
style="background: #ffffff; color:#000000;">
<option value="">Go to...</option>
<option value="#">Home</option>
<option value="#">Menu</option>
<option value="#">Restaurant</option>
<option value="#">About</option>
</select>
</div>
<div class=" collapse navbar-collapse" id="hafiz">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="location" >
<div class="row">
<div class="col-lg-6" align="">
<img class="img-responsive" src="images/location.png" alt="location"
width="40px" height="40px" />
</div>
<div class="col-lg-6">
<button id="b" type="button" class="btn btn-success">Change location
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="search">
<form id="webdesigntuts-workshop" action="" method="">
<input type="search" placeholder="Search..." ><button> Search</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="left-sidebar">
<div id="cssmenu">
<ul>
<li class="has-sub"><a href="#"><span>Deals Filter</span></a>
<ul>
<li><a href="#"><span>All Deals (7)</span></a></li>
<li><a href="#"><span>Kids Deals (1)</span></a></li>
<li><a href="#"><span>Hyper Discount (2)</span></a></li>
<li><a href="#"><span>Lunch Deals (1)</span></a></li>
<li class="last"><a href="#"><span>Midnight Deals (1)</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Cuisines</span></a>
<ul>
<li><a href="#"><span>Bakery (1)</span></a></li>
<li><a href="#"><span>BBQ (1)</span></a></li>
<li><a href="#"><span>Chinese(1)</span></a></li>
<li><a href="#"><span>Continental (2)</span></a></li>
<li><a href="#"><span>Mediterranean (1)</span></a></li>
<li><a href="#"><span>Italian (1)</span></a></li>
<li><a href="#"><span>Pakistani (3)</span></a></li>
<li><a href="#"><span>Pizza (7)</span></a></li>
<li><a href="#"><span>Frozen Yogurt (Froyo) (1)</span></a></li>
<li class="last"><a href="#"><span>Fast Food (11)</span></a></li>
</ul>
</li>
<li class="has-sub last"><a href="#"><span>Buduge</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-10">
<div class="item-data">
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
</div>
</div>
</div> \t
</div>
</body>
</html>
Sie haben gerade ein Verhalten auf große Bildschirme eingestellt ('col-lg-12'); Wenn Sie eine andere Anordnung auf kleinen Bildschirmen wünschen, legen Sie auch 'col-xs'-Werte fest. Bootstrap ist keine Magie, es macht einen Teil der Arbeit für dich, nicht die ganze Arbeit. –
Es gibt viel mehr hier zu beheben, anstatt nur lg in sm zu ändern. –
ich bin neu in dieser Technologie freundlicherweise zeigen Sie mir, wie das zu tun ist, was Schritte ich folgen muss ich bin sehr dankbar zu Ihnen – umair