TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahojte, začínam pracovať s FW bootstrap a akosi si už dlhšiu dobu lámem hlavu nad jedným problém, dnes som sa rozhodol požiadať vás o pomoc. Mám HTML stránku:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>Logo</title>
<!-- Bootstrap core CSS -->
<link href="http://startbootstrap.com/templates/css/bootstrap.css" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php">Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#about">Menu 1</a>
</li>
<li><a href="#services">Menu 2</a>
</li>
<li><a href="#contact">Menu 3</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/900x300" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x300" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x300" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...</p>
<hr>
</div>
<div class="col-lg-4">
<div class="well">
<h4>Sidebar 1</h4>
<div class="input-group">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus semper, semper ipsum vel, ornare ligula. Etiam a luctus odio. Praesent adipiscing, lectus vitae venenatis mollis, nisl sem pellentesque metus, non sollicitudin enim justo id mi. Sed condimentum nunc et tristique posuere. Vestibulum tellus dolor, tempor eget eros quis.
</div>
<!-- /input-group -->
</div>
<!-- /well -->
<div class="well">
<h4>Sidebar 2</h4>
<div class="row">
<div class="col-lg-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
<br><button type="button" class="btn btn-success">Detail</button>
</div>
</div>
</div>
<!-- /well -->
<div class="well">
<h4>Sidebar 3</h4>
<div class="row">
<div class="col-lg-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
<br><button type="button" class="btn btn-success">Detail</button>
</div>
</div>
</div>
<div class="well">
<h4>Sidebar 4</h4>
<div class="row">
<div class="col-lg-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
<br><button type="button" class="btn btn-success">Detail</button>
</div>
</div>
</div>
<!-- /well -->
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright ©</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
V style.css mám ešte dodatočne tento kód:
body {
margin-top: 100px;
}
footer {
margin: 50px 0;
}
Ide mi o to, že na niektorých zariadeniach sa mi všetky SIDEBAR presunú úplne dole pod všetko, riešenie je zmena zoomu prehliadačana 75%, alebo mne sa to na rozlíšení 1366x768 ukáže normálne na pravom boku, väčšie rozlíšenia s tým majú akosi problém.
Vedeli by ste mi pomôcť, akým spôsobom mám zafixovať dané SIDEBARS tak, aby boli napravo a boli tam zafixované? Možno stačí len pár riadkov do style.css, ale akosi neviem ako na to. Budem veľmi rád ak sa niekto nájde a pomôže mi s týmto problémom, s ktorým sa trápim už dlho.
ĎAKUJEM!
Nahlásit jako SPAM
IP: 95.105.244.–
Zjistit počet nových příspěvků
