Jump to content

some problems with Bootstrap and div...


Nati323

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:

554ba752d4bc5.png

 

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:

554ba7d35ecc7.png

 

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:

554ba94fa066b.png

 

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...