Databases
StackOverflow2013
Postsdbo
POChange the bootstrap's navbar so that links occupy the whole space
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange the bootstrap's navbar so that links occupy the whole space
    primarykey
    data
    text
    <p>I am using bootstrap 3x. I have the following navbar :</p> <pre><code>&lt;div class="navbar" role="navigation"&gt; &lt;div class="container"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;div class="navbar-collapse collapse" id="nav-secondary"&gt; &lt;ul class="nav nav-pills nav-justified"&gt; &lt;li style="border: 1px solid grey"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.navbar-collapse --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>When I use the container class - <code>&lt;div class="container"&gt;</code> I get a lot of padding which in bigger resolution looks even worse and even though I use <code>nav-justifed</code> it's like the menus are centered. This screenshot can make it more clear</p> <p><img src="https://i.stack.imgur.com/lj0Vj.png" alt="With padding"></p> <p>But I want to avoid this padding and let the menus occupy the whole space like this :</p> <p><img src="https://i.stack.imgur.com/qMVpi.png" alt="Whole space"></p> <p>The second image is when the <code>&lt;div class="container"&gt;</code> is commented. I guess the padding that I still get is from the <code>.navbar</code> class but it's still better. But I wonder - is it ok to remove the <code>&lt;div class="container"&gt;</code> from the navbar, because to me it doesn't seem like very good idea (may be wrong though). Also I'm still getting padding so my questions are:</p> <ol> <li>Is it ok to remove the <code>&lt;div class="container"&gt;</code>?</li> <li>Can you help with a CSS based solution which I think will be better here?</li> </ol> <p>Edit:</p> <p>PrintScreen with changed width: <img src="https://i.stack.imgur.com/K34J9.png" alt="Css modified"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLeron
    1. USLeron
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIt's okay to remove the `container`
      singulars
      1. POChange the bootstrap's navbar so that links occupy the whole space
      1. USThemes.guide
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload