BootStrap navigation bar problem record, bootstrap navigation bar

BootStrap navigation bar problem record, bootstrap navigation bar

What we have done today: (implements the vertical split in the response navigation bar of test9 and center in the drop-down list .)

I think the most troublesome thing is to modify the bootstrap format. I have made several demos to abuse the navigation bar. But there is no clue. It was known that after playing the werewolf killing last night, the ghost machine suddenly flashed.

Can we achieve Vertical Split through a fixed internal height.

The effect of viewing a psd is that a in the navigation bar is vertically evenly divided.

So can I achieve Vertical Split by setting the height of the hyperlink?

<Div "h-nav"> <nav "container navbar-default" role = "navigation"> <div "row"> <div "navbar-header df-jcsbc"> <a "navbar-brand" href = "#" rel = "external nofollow">  </a> <button type =" button "" navbar-toggle "data-toggle =" collapse "data-target =" # navbar-collapse "> <span "sr-only"> switch navigation </span> <span "icon-bar"> </span> <span "icon-bar"> </span> <span" icon-bar "> </span> </button> </div> <div" collapse navbar-collapse "id =" navbar-collapse "> <ul id =" h-cell-1" "nav navbar-nav lsno navbar-right"> <li "> <a href =" test9-1.html "rel =" external nofollow "> Home </a> </li> <li ""> <a href = "test9-3.html" rel = "external nofollow"> <span "dib"> occupation </span> </a> </li> <li" "> <a href =" test9-2.html "rel =" external nofollow "rel =" external nofollow "> <span" dib pat "> recommendations </span> </a> </ li> <li ""> <a href = "#" rel = "external nofollow"> <span "dib pat"> about </span> </a> </li> </ul> </div> </nav> </div>

With this idea, I set the following attributes.

#h-cell-1 a{  display:inline-block;  height:97px;  margin-left:32px;  font-size:17.8px;  text-decoration: none;color:white;}

How can we achieve vertical center?

The first thing that comes to mind is position positioning.

To implement the position relative to the ahyperlink, a span box must be introduced.

<Li ""> <a href = "test9-2.html" rel = "external nofollow" rel = "external nofollow"> <span "dib pat"> recommendation </span> </> </li>

Then add

#h-cell-1 li{height:97px;}#h-cell-1 a{  display:inline-block;  position:relative;  width:40px;  height:97px;  margin-left:32px;  border-bottom:2px solid #20B176;  font-size:17.8px;  text-decoration: none;color:white;}#h-cell-1 a span{width:40px;}

Vertical center can be achieved!

However, another problem occurs again. In the small screen of galaxy5, the li spacing of the drop-down menu is too large, which is not beautiful.

What should I do?

This method was created on the evening of the 28th. Inspiration also read the daily reports of other students. They mentioned media queries.

Well, what is media query. Baidu is recommended. We will not introduce it here.

Media query, right? It takes so long.

@media only screen and (max-width: 700px) {#h-cell-1 li{height:auto;}#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}#h-cell-1 a span{height:auto;}}

OK, perfect.

But there are still problems!

The icon is not vertically centered with the button! How can this problem be solved!

<Div "navbar-header df-jcsbc"> <a "navbar-brand" href = "#" rel = "external nofollow" = "external nofollow" rel = "external nofollow ">  </a> <button type = "button" "navbar-toggle" data-toggle = "collapse" data -target = "# navbar-collapse"> <span "sr-only"> switchover navigation </span> <span "icon-bar"> </span> <span "icon -bar "> </span> <span" icon-bar "> </span> </button> </div>

Aren't they all in the navbar-header box?

Can't the two ends of flex be aligned to achieve vertical?

Try it

Added

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;} 

But the effect is not satisfactory! In general,. navbar-brand and navbra-toggle implement vertical center.

So what should we do?

I did it directly.

.navbar-header{position: relative;height:97px;}.navbar-brand{padding:0;  }.navbar-header img{position:absolute;  left:20px;}.navbar-header button{position:absolute;  margin:0;  right:20px;}

Padding and margin to let them out.

Then, the distance between the left and right points is slightly adjusted through positioning.

The vertical center can be achieved.

What we plan for tomorrow and today: (according to the UI self-check proposed by Senior Brother EVA: first, compare the font size, color, margin, positioning, and other issues, then, you can check whether there are problems such as layout disorder and inconsistency in different resolutions. Test10 .)

Summary

The above is the BootStrap navigation bar issue record introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!