Witam. Na początku dodam, że jestem kompletnie zielony jeżeli chodzi o Bootstrapa. Piszę stronę (https://gyazo.com/b3b95daab6c17830ff0d23d692a467cf <- screenshot), i nie potrafię sobie poradzić z umieszczeniem jakiejś treści pod tą nawigacją "Option1 ...". Poniżej kod strony:
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head><body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Site name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Page1</a>
</li>
<li>
<a href="#about">Page2</a>
</li>
<li>
<a href="#contact">Page3</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-body">
<ul class="chat">
<li class="clearfix">
<div class="chat-body clearfix">
<strong style="color:red" class="primary-font">SimpleUser</strong>:
<span>Ls</span>
</div>
</li>
<li class="clearfix">
<div class="chat-body clearfix">
<strong style="color:red">SimpleUser</strong>:
<span>Ls</span>
</div>
</li>
<li class="clearfix">
<div class="chat-body clearfix">
<strong style="color:red" class="primary-font">SimpleUser</strong>:
<span>Ls</span>
</div>
</li>
<li class="clearfix">
<div class="chat-body clearfix">
<strong style="color:red" class="primary-font">SimpleUser</strong>:
<span>Ls</span>
</div>
</li>
<li class="clearfix">
<div class="chat-body clearfix">
<strong style="color:red" class="primary-font">SimpleUser</strong>:
<span>Ls</span>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here...">
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#">Option1</a>
</li>
<li role="presentation">
<a href="#">Option2</a>
</li>
<li role="presentation">
<a href="#">Option3</a>
</li>
</ul>
</div>
</div>
</body></html>
.navbar-nav > li > a, .navbar-brand {
height: 50px;
}
.navbar {min-height:50px !important;}
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 1px;
padding-bottom: 2px;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body span
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.panel-body
{
overflow-y: scroll;
height: 450px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.container .row {
margin-top: 15px;
}
Gdy próbuję umieścić jakąś treść pod tym menu wyświetla się poniżej czatu, a chciałbym żeby zmieściła się w wolnej przestrzeni poniżej menu.
Pozdrawiam.
