css - Center content in responsive bootstrap navbar -


i'm having trouble centering content in bootstrap navbar. i'm using bootstrap 3. i've read many posts, css or methods used not work code! i'm frustrated, last option. appreciated!

<!doctype html> <html>   <head>     <title>navigation</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!-- bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">     <link href="css/style.css" rel="stylesheet" media="screen">   </head>   <body>     <div class="container">       <nav class="navbar navbar-default" role="navigation">         <!-- brand , toggle grouped better mobile display -->         <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>         </div>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse navbar-ex1-collapse">           <ul class="nav navbar-nav">             <li><a href="#">link</a></li>             <li><a href="#">link</a></li>           <li><a href="#">link</a></li>             <li><a href="#">link</a></li>             <li class="dropdown">               <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a>               <ul class="dropdown-menu">                 <li><a href="#">action</a></li>                 <li><a href="#">another action</a></li>                 <li><a href="#">something else here</a></li>                 <li><a href="#">separated link</a></li>                 <li><a href="#">one more separated link</a></li>               </ul>             </li>           </ul>         </div><!-- /.navbar-collapse -->       </nav>       <h1>home</h1>     </div>      <!--javascript-->    <script src="js/jquery-1.10.2.min.js"></script>    <script src="js/bootstrap.min.js"></script>  </body> </html>

https://jsfiddle.net/amk07fb3/

i think looking for. need remove float: left inner nav center , make inline-block.

.navbar .navbar-nav {   display: inline-block;   float: none;   vertical-align: top; }  .navbar .navbar-collapse {   text-align: center; }

http://jsfiddle.net/bdd9u/2/

edit: if want effect happen when nav isn't collapsed surround in appropriate media query.

@media (min-width: 768px) {     .navbar .navbar-nav {         display: inline-block;         float: none;         vertical-align: top;     }      .navbar .navbar-collapse {         text-align: center;     } }

http://jsfiddle.net/bdd9u/3/


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more