Background
I am making an interface, where I show items and I use nav pills to display information.
I am using Twitter Bootstrap to achieve the look I want, but my grid layout is not working as intended.
Problem
In my interface, I want the nav-pills to occupy the entire space of the row they are in, but they only occupy the left corner:
<ul class="nav nav-pills row">
<li class="active col-sm-4">
<a>Information</a>
</li>
<li class="col-sm-4">
<a>Facts</a>
</li>
<li class="col-sm-4">
<a>Simillar</a>
</li>
</ul>
I read the documentation, and I believe I am doing everything fine. Here is a Plunker example where you can check the mini example I provided:
https://plnkr.co/edit/E4Fx0x8xmuy6d1TwJe9R?p=preview
Questions
What am I doing wrong?
How can I fix it?
I think "to occupy the entire space of the row they are in" you could use predefined class nav-justified:
<ul class="nav nav-pills nav-justified">
Related
I am using Twitter Bootstrap.css.
I have a top navigation bar which will normally show a menu with hover-over popup for sub items.
But when the collapsed is set due to #media constraints, I want to show the content as nested <select> and <Option> elements.
Clicking the menu button will show content like this:
I am not sure how to perform an inverse collapse. I have tried collapse, collapse.in, etc. styles.
I want to show one content when collapsed and another if not collapsed. Both content areas need to show in the navbar area.
I would like to do pure CSS with no javascript.
The following is the HTML I want to hide when callapsed. I have not created the HTML with the select/option tags yet.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" ng-if="userData.isAdminUser" style="cursor: pointer;">
<li class="dropdown">
<a>Managment</a>
<ul class="dropdown-menu">
<li>Employees</li>
<li>Groups</li>
<li>Products</li>
<li>Skills</li>
<li>Levels</li>
</ul>
</li>
</ul>
</div>
I would like to create page header menu by bootstrap like image below (I am wondering how to create "+" link below the Contact menu ). Can anybody help?
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Contacts", "Index", "Contacts")</li>
<li>#Html.ActionLink("Administration", "Index", "Settings")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
You can achieve that either by adding a span in the li, or by targeting the first list element and using the pseudo-element ::after
Here is an example using ::after:
http://jsfiddle.net/8gj1wsca/
I am trying to figure out how to switch between nav-stacked nav-pills for mobile and non-nav-stacked nav-pills for everything else using Bootstrap.
For example, for desktop:
<nav>
<ul class="nav nav-pills">
<li role="presentation" class="active">About</li>
<li role="presentation">Services</li>
<li role="presentation">Pricing</li>
<li role="presentation">Contact</li>
</ul>
</nav>
And for mobile:
<nav>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">About</li>
<li role="presentation">Services</li>
<li role="presentation">Pricing</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Let me answer my own question, in case anybody else is helped by it. I found that a good way is to use the .hidden class. For example in the above code, the first block's class would be modified as such:
<ul class="nav nav-pills hidden-xs">
And the second block's class would be modified as such:
<ul class="nav nav-pills nav-stacked visible-xs-inline">
Hope this is helpful!
This depends on the size of the screen that you want the specific menu to show in.
Give the nav an ID.
<nav id="desktopNav">
and
<nav id="mobileNav">
This is what I would do.
FOR DESKTOP
I would hide the mobile menu
#mobileNav{ display:none;}
FOR MOBILE
I would hide the desktop menu
#desktopNav{ display:none;}
Basically, what this will do, is show the desktopNav when you are looking at it on a computer or maybe tablet, and then show the mobileNav when on a phone.
Within your CSS, you want to do this for mobile devices
#media only screen and (max-width: 600px) {
ENTER YOUR CSS CODE HERE
}
This would go at the end of your CSS file. This tells the brower that any device that is under 600px it will do something else. You would put the desktopNav in there. This is called a responsive website.
I'm using the Twitter Bootstrap (v2.1.1) with a PHP site. I'm generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.
I would like to align the last dropdown menu to the right of the screen but haven't been able to so far. Here's a jsFiddle showing a simplified version:
http://jsfiddle.net/fmdataweb/AUgEA/
I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:
<li class="dropdown pull-right">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
I've tried chaging it to:
<li class="dropdown pull-right">
but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p> text?
You need to change the .pull-right class to ul element instead of li.
HTML
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Version 2.1.1
I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.
http://jsfiddle.net/caio/gvw7j/
If you see the responsive menu in the above link, you can see the "wide result" in this link:
http://jsfiddle.net/caio/gvw7j/embedded/result/
.pull-right is defined by:
.pull-right {
float: right !important;
}
Version 3.1.1
There were no changes in this class. You might see the helpers classes section.
However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.
If you came here trying to right-align a regular bootstrap .dropdown-menu and NOT a .nav, and are using Bootstrap 3, the correct class to add is .dropdown-menu-right
Here's the bootstrap documentation:
<ul class="dropdown-menu dropdown-menu-right">
...
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
For eg.,
<ul class="nav navbar-nav navbar-right">
.
.
</ul>
Instead of pulling the li element to the left, simply contain that element which you wish to be right aligned within its own ul list and pull that instead like so:
HTML
<ul class="nav pull-right">
<li class="dropdown">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/AUgEA/1/
What's the best way to fix the width and height of left tabs in twitter bootstrap to use it as a fixed size navigation bar? Questions are better illustrated in the code below.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="nav-header">Questions</li>
<li class=""><a data-toggle="tab" href="#lA">------ Question 1 -------</a></li>
<li class="active"><a data-toggle="tab" href="#lB">------ Question 2 ------</a></li>
</ul>
<div class="tab-content">
<div id="lA" class="tab-pane">
<p>How do I fix the width of this section as to avoid using the --------</p>
</div>
<div id="lB" class="tab-pane active">
<p>Can I fix the height as well?</p>
</div>
</div>
</div>
I'm not really familiar with Bootstrap but as no body else has answered, here goes...
Since the two elements you have highlighted both have IDs, why cant you just give them specific widths / heights?
#1A {
width: 300px;
}
#1B {
height: 30px;
}
As I say, I'm not familiar with Bootstrap so I may be misunderstanding your question but that seems like the simple solution to me.