All geek questions in one place

Responsible objects of equal height inside navbar in Bootstrap 3.1.1

I read navbar-nav information, but I do not use it because it creates a list from my li elements instead of a string.

Img without navbar-nav

If I want to achieve this, I have to add this css

@media screen and (min-width: 768px) { .navbar-nav { width: 100%; } }

But this piece of css does not resolve my problem with IE8

IE8

HTML code

 <nav class="status-navbar navbar navbar-default" role="navigation"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse container-fluid container-lg-height container-md-height" id="bs-navbar-collapse-1"> <div class="row row-lg-height row-md-height" style="margin: 0;"> <div class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle"> <form class="navbar-form navbar-left search-form" role="search"> <div class="form-group col-lg-10 col-md-10"> <input type="text" class="search-input form-control input-lg" placeholder="Twitter Quick Search"> </div> <div class="col-lg-2 col-md-2"> <button type="button" class="btn btn-lg btn-primary"> <span class="glyphicon glyphicon-search"></span> </button> </div> </form> </div> <div class="col-lg-7 col-md-7 col-lg-height col-md-height col-middle"> <ul class="nav navbar-nav"> <li class="col-lg-2 col-md-2 metricItem underline"><span class="metricsLabel">FOLLOWING</span> <span id="followingTweetIds" class="metricsValue">0</span></li> <li class="col-lg-3 col-md-3 metricItem"><span class="metricsLabel">SAVED SEARCHES</span> <span class="metricsValue">0</span></li> <li class="col-lg-2 col-md-2 metricItem"> <span class="metricsLabel">TWEETS RETRIEVED</span> <span id="tweetsRetrieved" class="metricsValue">0</span> <div class="limitPane"> <span class="metricsLabel">( LIMIT</span> <span id="limitRequests" class="limitRequests"></span> <span class="metricsLabel">)</span> </div> </li> </ul> </div> <div class="col-lg-1 col-md-1 col-lg-height col-md-height col-middle"> <ul class="nav navbar-nav"> <li><a href="#" id="notificationBtn" class="notificationBtn" style="font-size: 17px;"> <span class="glyphicon glyphicon-bell">Notifications</span> </a></li> </ul> </div> </div> </div> </nav>

Please help me understand why I should use navbar-nav and how to make this a cross-browser solution in my example.

JSFiddle Link

Even interestingly, I repositioned this snippet from my head under bootstrap.min.css at the bottom of the <body> element.

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->

Now in IE 8 it looks like new navbar img in IE8

It was my mistake with a place to enable resond js. Because I am using jquery layout structure. I realized that I have a display problem: table-row. I use it because I want to create columns inside a row that have equal heights Bootstrap 3 reacting columns of the same height

Link to Respond.js script after all your Css

. UPDATE 2

I changed my default bootply navigator . But it is still different from the result that I want to achieve. I lost the ability to align the Notification link and the form element inside navbar addind navbar-btn does not help. I cannot perform flexible width for input field. Bootstrap 3 - How to increase input width inside the navigator . This solution only works well for an input group. Please help me understand how to create

  • Responsible elements of the same height inside the navigator
  • The form is the width of the stretch (using a group of input groups, not a group of forms), so when I change the size of the page button, we go to the next line
+6
source share
4 answers

This example is provided in the Bootstrap 3.2 file, which contains bug fixes for its components, but this is probably not a problem. Your css is very dirty and it is hard to determine what is not working in IE8.

I would build my own component and not use Navbar, which is not intended to be used just like you. Too many spelling is not a good idea without intimate familiarity with the original CSS.

Avoid margins, like yours, on elements with a box: a dimensional frame, especially if they try to fit inside a container with liquid. You have fields on classes, it will be useless.

Screen shot of IE 8:

enter image description here

Demo: http://jsbin.com/zaxiwo/1/

Edit: http://jsbin.com/zaxiwo/1/edit

Tips:

  • Keep media queries to a minimum, and this is less if possible.
  • Every time you make changes, even minor ones, check IE8, then you know what happened.
  • Comment html

HTML: (it is required that response.js be correctly installed in the head according to their instructions before CSS and locally place CSS linked via the RELATIVE path.)

Notes: html and CSS are not complete, small viewport styles have not been implemented. You place a common, common to all sizes of viewports BEFORE THE MINI-SCALE REQUEST. If it’s common to everyone, it’s beyond the scope of media queries, but if there is a slight difference, you can remove this style, so if there is a spacer on the small viewports, but there is no addition on the large one, delete the filling for a larger one, but if there is a general difference in appearance, and then put smallviewport styles ONLY in max-width, which is 1px less than the minimum width.

  <div class="control-bar container-fluid"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".control-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 class="collapse control-collapse"> <div class="row"> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Go!</button> </span> </div> <!-- /input-group --> </div> <!--/.col-*-3 --> <div class="col-sm-5"> <div class="row"> <div class="col-sm-4 indicator active"> <span class="title">Word</span> <span class="number">1</span> </div> <!--/.col-*-4.indicator :: nested --> <div class="col-sm-4 indicator"> <span class="title">Word</span> <span class="number">2</span> </div> <!--/.col-*-4.indicator :: nested --> <!--/.col-*-4 :: nested --> <div class="col-sm-4 indicator"> <span class="title">Word</span> <span class="number">3</span> <span class="notice">word</span> </div> <!--/.col-*-4.indicator :: nested --> </div> <!--/.row (nested) --> </div> <!--/.col-*-7 --> <div class="col-sm-3 col-sm-offset-1 icon-link"> <a href="#"><i class="glyphicon glyphicon-home"></i> icon link goes here</a> </div> <!--/.col-*-3 --> </div> <!--/.row --> </div> <!--/.nav-collapse --> </div> <!--/control-bar.container-fluid -->

CSS

 .control-bar { background: #333; color: #fff; clear: both; } .control-bar a {color:#fff} .control-bar .control-collapse { clear: both; width: 100%; padding: 0 15px 20px; } .control-bar .icon-bar { background: #fff; } .indicator:hover, .indicator.active { border-bottom-color: orange } .indicator { padding: 10px 15px; border-bottom: 5px solid transparent; } .icon-link a { padding: 10px 0; display: block; } /* how it looks on larger viewports*/ @media (min-width:768px) { .control-bar .control-collapse { display: inline!important; padding: 0; } .indicator { height: 100px; padding: 5px 0 0 0; display: table; } .indicator span { display: table-row; text-align: center; font-size: 14px; border: 1px solid red; vertical-align: middle; } .indicator .title { font-size: 15px; text-transform: uppercase; } .indicator .number { font-size: 20px; color: orange; } .indicator .notice { font-size: 12px } /* height of parent minus by height of element divided by 2 */ .control-bar .input-group { margin-top: 33px } .icon-link { text-align: right; padding-top: 28px; } }
+4
source

Internet Explorer cannot read CSS Media requests, so you need to add this meta tag to the HTML header:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

And include the JS file so that IE reads and executes these media queries:

 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
0
source

Before you begin in Bootstrap version 3.1.1

You should be aware of browser compatibility and CSS3 support for Windows Explorer 8!

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of response.js to enable support for media queries.

See also: https://github.com/scottjehl/Respond

For this reason, the main template contains these lines in the chapter section:

 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->

useful links

To do this, in the Bootstrap Documentation:

B1

B2

0
source

Try importing html5-reply.js in the header section of the html page hten IE will be able to display media queries.

0
source

Source: https://habr.com/ru/post/974988/

More articles:


All Articles