ورود

View Full Version : آموزش: مشکل فوتر در بوت استرپ



jokerhp
پنج شنبه 26 مهر 1397, 16:19 عصر
سلام به همه دوستان خسته نباشید

من سایتی با بوت استرپ طراحی کردم

در ساز lg هیچ مشکل نیست

ولی وقتی سایز کوچک میشه فوتر به وسط صحفه میاد

مشکل از چی میتونه باشه ؟؟؟

marasiali
پنج شنبه 26 مهر 1397, 21:32 عصر
سلام باید کدتون رو دید که چه اصلی رو رعایت نکردین. چشم بسته که نمیشه فهمید. تو اینجا ها inspect element مرورگر هم خیلی به کار میاد که ببینین چه کلاس یا ویژگی بهش اعمال میشه تو سایز کوچیک که همه چی رو بهم میریزه.

jokerhp
جمعه 27 مهر 1397, 14:57 عصر
کد های من اینه



<!DOCTYPE html>
<html lang="en">
<head>
<style>
@font-face {
font-family: 'yekan';
src: url('font/Weblogma_Yekan.ttf') format('truetype');
}
.yekan{font-family: 'yekan';}
.fontsm{font-size: 10%;}
.fontmd{font-size: 11%;}
.fontlg{font-size: 12%;}

</style>
<title>aps4</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/css.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Footer-with-button-logo.css">


</head>
<body>

<div id="header1">
<div class="container-fluid yekan">
<div class="row" style="height: 36px;background-color: #f9f9f9">
<div class="col-ms-12 hidden-xs hidden-sm text-right" style="font-size: 12pt">
<p id="text-header">به فروشگاه ما خوش امدید
<a style="text-decoration: none">ورود</a>
یا
<a style="text-decoration: none">ثبت نام</a>
</p>

</div>
</div>
</div>
<div class="container-fluid yekan">
<div class="row" style="height: 91px;background-color: #ffffff">
<div class=" col-md-3 hidden-xs hidden-sm" style="height: 91px">
<img id="brand" src="img/logo.png" width="160px">
</div>
<div class=" col-md-6 hidden-xs hidden-sm text-center" style="height: 91px">
<div id="btn_serch">
<img src="img/search.png">
</div>
<input placeholder="جستجو کنید" id="input_serch" type="text">
</div>
<div class=" col-md-3 hidden-xs hidden-sm " style="height: 91px">
<div id="basket">
<div id="basket_left">
<div id="basket_total">
<p>0</p>
</div>
</div>
<div id="basket_rigth">
<img src="img/basket.png" width="28px" height="24px">
<p>0 تومان</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid yekan">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<div class="col-xs-1 col-sm-1 hidden-lg hidden-md">
<img src="img/user-silhouette.png" width="24px" style="margin-top: 10px">
</div>
<div class="col-xs-1 col-sm-1 hidden-lg hidden-md">
<img src="img/basket.png" width="24px" style="margin-top: 10px">
</div>
<div class="col-xs-1 col-sm-1 hidden-lg hidden-md">
<img src="img/musica-searcher.png" width="24px" style="margin-top: 10px">
</div>
<div class="col-xs-4 col-sm-4 hidden-lg hidden-md">
<img src="img/logo.png" width="100px">
</div>
<div class="col-xs-3 col-sm-3 hidden-lg hidden-md pull-right">
<button type="button" data-target="#navdiv" aria-expanded="false" data-toggle="collapse" class="navbar-toggle collapsed">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse" id="navdiv">
<ul id="navul" class="nav navbar-nav navbar-right">
<li><a>قوانین</a></li>
<li><a>تماس با ما</a></li>
<li><a>حراجی</a></li>
<li><a>دیسک</a></li>
<li><a>اکانت</a></li>
<li><a>خانه</a></li>
</ul>
</div>

</nav>

</div>
</div>
</div>
<div id="main1">
<div class="container-fluid yekan">
<div class="row">
<div class="col-md-12" style="position: relative">
<div style="width: 80%" id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/20.jpg" alt="Los Angeles" style="width:auto;">
</div>

<div class="item">
<img src="img/30.jpg" alt="Chicago" style="width:auto;">
</div>

<div class="item">
<img src="img/40.jpg" alt="New york" style="width:auto">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="container-fluid yekan">
<div class="row">
<div class="col-md-12">
<div id="main_left" class=" col-md-8 col-sm-8 col-md-push-1 col-sm-push-1 ">
<div id="scroll">
<div id="scroll_header">
<p>اکانت های قانونی</p>
</div>
<div id="scroll_main">
<div class="row">
<div class=" col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive img_re" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
<div class="col-md-3 col-sm-6 text-center"style="margin-top: 8px">
<img class="img-responsive" src="img/q.jpg">
<p>fifa 19</p>
<p>890000
تومان
</p>
<a class="btn btn-success">اضافه به سبد خرید</a>
</div>
</div>
<ol class="pagination">
<li><a>&laquo;</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>&raquo;</a></li>
</ol>
</div>
</div>

</div>
<div id="main_right" class="col-lg-4 col-md-4 col-sm-4 col-lg-push-1 col-md-push-1 col-sm-push-1 hidden-xs">
<div id="telegram">
<img src="img/telegram.png">
<p>تلگرام ما</p>
</div>
<div class="logo1 img-responsive">
<img src="img/logo13.jpg">
</div>
<div class="logo1 img-responsive">
<img src="img/logo14.jpg">
</div>
<div class="logo1 img-responsive">
<img src="img/logo15.jpg">
</div>
<div class="logo1 img-responsive">
<img src="img/logo16.jpg">
</div>
<div class="logo1 img-responsive">
<img src="img/logo17.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer1">
<div class="content">
</div>
<footer id="myFooter">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<h2 class="logo"><a href="#"> LOGO </a></h2>
</div>
<div class="col-sm-2">
<h5>Get started</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
<div class="col-sm-2">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-sm-2">
<h5>Support</h5>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help desk</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-sm-3">
<div class="social-networks">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus"></i></a>
</div>
<button type="button" class="btn btn-default">Contact us</button>
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2016 Copyright Text </p>
</div>
</footer>
</div>
<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>

</body>
</html>

charcharkh
یک شنبه 06 آبان 1397, 16:21 عصر
خب به footer آیدی myFooter دادی و بالاترش هم یک <div id="footer1"> داری ؟!! ببین چه استایلی بهش دادی خیلی راحت