html - Bootstrap 3, how to create a navbar with a brand image and two rows of links? -

-

i can't understand how code nav bootstrap:

navbar

as can see composed of brand image on left, space , 2 rows should fit brand length , should fit window width.
did doesn't work fine. when resize window nav goes off of window. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <nav class="navbar navbar-default">    <div class="container-fluid" id="nav">      <div class="row">        <div class="navbar-header"> <a href="#"><img src="~/images/logo.png" class="logo" width="308" height="130" alt="" style="float:left; margin-left:20px;margin-right:100px;"></a> </div>        <ul class="nav navbar-nav">          <li class="active">link</li>          <li>link</li>          <li>link</li>          <li>link</li>        </ul>        <ul class="nav navbar-nav">          <li>link</li>          <li>link</li>          <li>link</li>          <li>link</li>        </ul>      </div>    </div>  </nav>

let's start default navbar bootstrap's documentation.

  1. turn brand image simple non-floating block.
  2. leave empty space on right side only.
  3. wrap menu items 1 <ul></ul> make them higher.
  4. force 5th element start new line. clear mind, open heart. items left-floating, clear: left; enough. 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');    .navbar-brand {    display: block;            /* 1. */    float:   none;    height:  auto;    margin:  0 !important;     /* 2. */    padding: 0 20px 0 0;  }    @media (min-width: 768px) {    .navbar-nav>li>a {         /* 3. */      line-height:    21px;      padding-top:    22px;      padding-bottom: 22px;    }      .clear-left {              /* 4. */      clear: left;    }  }
<nav class="navbar navbar-default">    <div class="container">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">          <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="#"><img src="//placehold.it/308x130/c69/f9c/?text=brand" alt=""></a>      </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">          <li class="active"><a href="#">link 1</a></li>          <li><a href="#">link 2</a></li>          <li><a href="#">link 3</a></li>          <li><a href="#">link 4</a></li>          <li class="clear-left"><a href="#">link 5</a></li>          <li><a href="#">link 6</a></li>          <li><a href="#">link 7</a></li>          <li><a href="#">link 8</a></li>        </ul>      </div>    </div>  </nav>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Comments

Post a Comment

Popular posts from this blog

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

arrays - Algorithm to find ideal starting spot in a circle -

-
so problem have been debating such: your given array of integers representing circle. then, have pick spot in circle start. place start, compare value @ array number of steps took there , if steps less or equal number, include in final set. find place start have elements in set. ex, a=[0, 1, 2] if start @ index=0, then: a[0]=0 < =0 0 included a[1]=1 < =1 1 included a[2]=2 < =2 2 included final set: {0,1,2} if start @ index=1, then: a[1]=1 > 0 1 not included a[2]=2 > 1 2 not included here loop around a[0]=0 > 2 0 included final set: {0} if start @ index=2, then: a[2]=2 > 0 2 not included, here loop around a[0]=0 < = 1 0 included a[1]=1 < = 2 1 included final set: {0,1} so in trivial case, starting position index=0 best position results in final set elements. brute force method of finding obvious, trying find more efficient method. attempts far have been examine trying find max intersect of viable starting ranges calculated each element in arr...
Read more

php - Autoloader issue not returning Class -

-
problem? bootloader (autoloader) not seem working properly, or i'm missing something. here simplified code. the code below returns class "skeleton" not exist. on index.php file. index.php <?php include 'bootloader.php'; use skeleton\html\loginheader; $tool = new skeleton/html/loginheader(); bootloader.php <?php function boot($classname) { $filename = ''; $namespace = ''; // sets include path "src" directory $includepath = dirname(__file__).directory_separator.'src'; if (false !== ($lastnspos = strripos($classname, '\\'))) { $namespace = substr($classname, 0, $lastnspos); $classname = substr($classname, $lastnspos + 1); $filename = str_replace('\\', directory_separator, $namespace) . directory_separator; } $filename .= str_replace('_', directory_separator, $classname) . '.php'...
Read more