Photoshop Question posted in
The official user guide can be found here.

Bootstrap .nav-pills folding alignment – Photoshop

I am using nav-pills as a collection of toggles for a tagging system. It is an unordered list with list elements. The list items are setup like this with Jade and NodeJS:

.row
  .tagnav.col-xs-12
     ul.ptag.nav.nav-pills
        each tc in tagColours
           li(onClick="selectTag('"+tc.tag+"', '"+tc.colour+"')").active #{tc.tag}

The row is aligned in the centre of the screen with: 

.tagnav {
   display: flex;
   justify-content: center;
   flex-direction: row;
}

like so:

enter image description here

As I make the window more narrow the nav-pills start to fold (which is good) but the layout is not pleasant. This is what they look like when I make the window smaller:

enter image description here

I would like them to line up nicely in centred rows. Like this (photoshopped):

enter image description here

I am using Jade for my HTML so I can get the tags dynamically from an array on the server so for the jsfiddle I’ve just put the tags in statically. They seem to behave the same. JSFiddle

Thanks.

Tags:

2

Answers


  1. 0

    Adding this makes it better:

    .ptag.nav-pills > li.active {
  color: white;
  background-color: black;
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.nav-pills>li {
  display: inline-block;
}
.nav-pills {
  text-align: center;
}

    preview

    Fiddle: https://jsfiddle.net/bnn9f3a3/

    Login or Signup to reply.
  2. 0

    If you want to maintain the flex style..

    (see fiddle below for a more readable comments explanation)

    .tagnav {
    display: flex;
 }
 
 .ptag {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
 }
 
  li {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
   margin: 5px;
   padding: 5px 10px;
   text-align: center;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 18px;
   color: white;
   background-color: black;
   border-radius: 15px;
   cursor: pointer;
 }
 
.ptag.nav-pills > li.inactive {
  color: #909090;
}
    <div class="container">
  <br>
  <div class="row">
    <div class="tagnav col-xs-12">
      <ul class="ptag nav nav-pills">
        <li class="active">tech</li>
        <li class="active">art</li>
        <li class="active">electronics</li>
        <li class="active">dsp</li>
        <li class="active">c++</li>
        <li class="active">openframeworks</li>
        <li class="active">processing</li>
        <li class="active">graphics</li>
        <li class="active">java</li>
        <li class="active">unity3d</li>
        <li class="active">c#</li>
      </ul>
    </div>
  </div>
</div>

    fiddle

    based on your html structure

    https://jsfiddle.net/Hastig/x3mu0k1d/

    original, for others

    https://jsfiddle.net/Hastig/h8w58rzd/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search