مشکل در محل قرارگیری navbar
سلام، مشکل من در محل قرارگیری navbar در هنگام تغییرسایز صفحه " از دسکتاپ به تبلت- موبایل" هست. من میخوام که محل قرار گیری navbar در هنگام تغییر سایز صفحه، تغییر نکنه "از راست به تغییر نکنه". ممنون میشم راهنمایی کنید.
http://uupload.ir/files/254p_desktop_size.jpg
.
.
.
http://uupload.ir/files/smd9_mobile_1.jpg
کد html
کد PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>pakbar Imadyari</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Style -->
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="container">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="nav">
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#jumbotron">pakbar Imadyari</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left" id="navbar-left">
<li><a href="#jumbotron">About me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#education">Education</a><li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron" id="jumbotron">
<div class="col-xs-8"><h1>pakbar Iadyari</h1>
<a href="mailto:pyari505@gmail.com"><i class="fa fa-envelope-square fa-3x"></i></a>
<a href="https://www.facebook.com/pakbar.Imadyari"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="skype:east.biggest?call"><i class="fa fa-skype fa-3x"></i></a>
<ul class="fa-ul" id="traits">
<li>Gmail: pyari505@gmail.com</li>
<li>Location: Coon.Rapids/Minnesota</li>
</ul>
</div>
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="myself.jpg" alt="Selfie">
</div>
</div>
</div>
<section id="skills">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Skills</h2></div>
</div>
<div id="list">
<div class="row"><ul>
<div class="col-xs-12 col-sm-12">
<li>Html/CSS : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Photoshop : <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li></p>
</div>
<div class="col-xs-12 col-sm-12">
<li>C++: <span style="color:white;font-weight:normal;font-size: 77%">Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Microsoft Project : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li></p></div>
<div class="col-xs-12 col-sm-12">
<li>Hardware(asseble and repair): <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li>
</div>
</ul>
</div>
</div>
</section>
<section id="projects">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Projects</h2></div>
</div>
<div class="row" id="gallery">
<div class="col-sm-4 projects-item">
<img src="1.png" class="img-responsive" alt="Pacific Trails" />
</div>
<div class="col-sm-4 projects-item">
<img src="2.png" class="img-responsive" alt="Pacific Trails :: Activities" />
</div>
<div class="col-sm-4 projects-item">
<img src="3.png" class="img-responsive" alt="Ms B's Veggies" />
</div>
</div>
</section>
<section id="education">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Education</h2></div>
</div>
<div id="list">
<div class="row">
<ul>
<div class="col-xs-12 col-sm-12">
<li>High school diploma: <span style="color:white;font-weight:normal;font-size: 77%">2001, Tehran-Iran</span></li>
</div> <div class="col-xs-12 col-sm-12">
<p><li>BS, Mining Engineering: <span style="color:white;font-weight:normal;font-size: 77%">2005, Tehran-Iran</span></li></p>
</div> <div class="col-xs-12 col-sm-12">
<li>A.A.S., .NET Programmer: <span style="color:white;font-weight:normal;font-size: 77%">Graduation 2017, Hennepin Technical College</span></li>
</div>
</ul>
</div>
</div>
</section>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
کد css
کد PHP:
body {
background-color: #FFFFFF;
color: #FFFFFF;
position: relative;
padding-top: 80px;}
#jumbotron, #skills, #projects, #education {
box-shadow: 6px 6px 2px 0 #000000;}
@media screen and (min-width: 0px) and (max-width: 992px) {
#traits { display:inline; }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
#skills li, #education li { text-align:center; }
#projects h2 { text-align:center; }
#education h2 { text-align:center; }
#skills h2 { text-align:center; }
#jumbotron h1 {font-size: 30px; padding-top: 5px; }}
#traits {
font-size: 25px;
font-weight:normal;
padding-top: 50px;
margin-left: 0px;}
#traits li {
padding-bottom: 15px;}
#nav {
border-radius: 0;
padding-right: 15px;
}
#navbar-left {
padding-left: 15px;
}
ul {
list-style-type: none;}
#jumbotron{
background-color:#dc143c;
border-radius: 0;
margin-bottom: 80px;
}
#skills {
background-color:#bb1133;
padding: 0px;
margin-bottom: 80px;}
#list {
font-family: "Arial Black","Arial Bold",Gadget,sans-serif;
font-size: 25px;
margin: 10px 0 60px 0;
padding: 40px 0 40px 0;}
#list li {
padding: 10px;
margin-left: -30px;}
#projects {
background-color:#8c0d26;
padding: 0px;
margin-bottom: 80px;}
#education {
background-color:#5d091a;
padding: 0px;
margin-bottom: 80px;}
#gallery {
padding: 20px 0;
margin: 50px 0;}
#gallery img {
padding: 15px 0;
margin-bottom: 25px;}
h2 {
font-family: TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;
font-weight: bold;
font-size: 50px;}
i {
padding-right: 15px;
color: #FFFFFF;}
پاسخ : مشکل در محل قرارگیری navbar
مشکل شما در navbar-right و navbar-left هست
ببینید دوس دارید کدام حالت باشد هر 2 کد های حالت رسپانسیو و حالت عادی را یکی کنید یا left یا right
1 فایل پیوست
پاسخ : مشکل در محل قرارگیری navbar
مرسی- ولی در صورتیکه من همه رو یکی کنم در اینصورت navbar ها در یک سمت خواهند بود که من همچین چیزی نمیخوام، بنده نیاز دارم که navbar اصلی در سمت چپ باشد و button در سمت راست باشد :در تمامی حالات صفحه نمایش"، دقیقا مثل تصویر زیر:
فایل پیوست 28845
- - - Updated - - -
