Jump to content

some problems with Bootstrap and div...


Recommended Posts

hey, i have some problems,

1) i have a BootStrap navbar collapse, the code is:

<nav class="navbar navbar-inverse">  <div class="container-fluid">  <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>       </button>    </div>    <div class="collapse navbar-collapse" id="myNavbar">	<ul class="nav navbar-nav">	        <li style="display: {DISCONNECT};"><a href="#"><span class="glyphicon glyphicon-log-in"></span> {REGISTER} </a></li>			<li style="display: {DISCONNECT};"><a href="#"><span class="glyphicon glyphicon-user"></span> {LOGIN} </a></li>			<li style="display: {CONNECT};"><a href="#"><span class="glyphicon glyphicon-log-out"></span> {LOG_OUT} </a></li>			<li style="display: {CONNECT};"><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> {MY_CART} </a></li>			<li style="display: {CONNECT};"><a href="#"><span class="glyphicon glyphicon-envelope"></span> {MY_INVITES} </a></li>			<li style="display: {ADMIN};"><a href="admin/"><span class="glyphicon glyphicon-cog"></span> {CONTROL_PANEL} </a></li>	</ul>      <ul class="nav navbar-nav navbar-right">		<li id="search" style="display: none;"><form class="form-inline" action="search.php" method="POST" style="padding-top: 3%;"> <input class="form-control" type="text" name="search" placeholder="{SEARCH_HOLDER}" size="15" /> <button type="submit" class="btn btn-warning">{SEARCH_BUTTON} <span class="glyphicon glyphicon-search"></span></button></form></li>        <li><a href="#" onclick="$('#search').fadeToggle('slow');"><span class="glyphicon glyphicon-search"></span> {SEARCH} </a></li>        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> {ABOUT} </a></li>        <li><a href="#"><span class="glyphicon glyphicon-phone-alt"></span> {CONNECT_US} </a></li>		<li class="active"><a href="index.php"><span class="glyphicon glyphicon-home"></span> {HOME} </a></li>      </ul>    </div>  </div></nav>

now i try to see how its look like in mobile, so i enter via Chrome Mobile Mode, and the result is:



the navbar break into two lines, how can i fix that?

2) problem two, i did in the navbar search button when you press on it its open a search input, picture:



as you can see, here its also breaking into two lines, Although that there is Enough space in the first line for the search input and button.


3) prob 3, i have a tab div, the code:

<div class="container" style="width: 45%;float: right;"><ul class="nav nav-tabs navbar-right"><li><a data-toggle="tab" href="#sub_cats_{CID}">{SUB_CATEGORIES}</a></li><li class="active"><a data-toggle="tab" href="#category_{CID}">{CATEGORY}</a></li></ul><div class="clearfix"></div><div class="tab-content" style="height: 100%;"><div id="category_{CID}" class="tab-pane fade in active category" style="background-image: url('{CATEGORY_IMAGE}');">	<h1> {CATEGORY_NAME} </h1></div>  <div id="sub_cats_{CID}" class="tab-pane fade">  <ul class="sub_categories">	{SUB_CATEGORY_LIST}  </ul>  </div> </div></div>

as you can see in this picture:



where the arrows point, there is some space, the tab dosent start at the right corner, how can i fix it? and there is also some underline that continue behind the content div... , what to do?


4) i have a list in the the tab above, Code:

  <ul class="sub_categories">	<li><a href="products.php?act=scat&id=7">ONE</a></li><li><a href="products.php?act=scat&id=8">TWO</a></li><li><a href="products.php?act=scat&id=12">THREE</a></li><li><a href="products.php?act=scat&id=13">FOUR</a></li>  </ul>

and its dosent have a marker, although that i define to her list-style-type: disc, in the class sub_categories, i think that the bootstrap remove her, what to do?


5) que, when i set in css to image wiidth and height in % , the meaning of that is (for example) 25% from the image size? or the parent element size?


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...