1

I feel like this may have been answered before, but I've searched and can't find any problems that come close.

I'm working with a pretty standard bootstrap row and columns setup to style a menu bar (flexbox). This menu is generated by wordpress in php, rather than hard coded in html. As it's part of a website the menu can change over time: it may have 4 items at one time or 7 at another. Because these are items that can change, I don't know exactly how wide each will be.

I'm trying to make a row with one column for each item, so they each sit next to each other and fill the full width of the row. I can do this in bootstrap by simply using col, so it sets to make each column equal width.

<ul class="row">

  <li class="col">Menu Item 1</li>
  <li class="col">Menu Item 2 with much longer menu title</li>
  <li class="col">Menu Item 3 with long title</li>
  <li class="col">Menu Item 4</li>
  <li class="col">Menu Item 5</li>
  
</ul>

In the example, where we have 5 items, each column is 20% wide. However, this isn't ideal for my menu as the menu text will differ: I'd like longer items to fill more space and shorter ones to fill less, so you would get 30% and 10% instead of 20% - 20%.

Does anyone know if there's a way to do this in flexbox? I'm open to alternatives, like using simple divs width float: left applied, or similar, my main problem using these so far is that they don't naturally fill the full space of the row without having a width applied.

Note: I'm aware this is pretty much exactly what a table does. I'm not open to using a table for this as it's a responsive piece of coding, and I need menu items to style differently on devices, for instance give 100% width for each menu item on mobile. It'll be a huge headache to do achieve that with a table but very straightforward to do so with flexbox.

D. Schreier
  • 1,700
  • 1
  • 22
  • 34
Anne
  • 111
  • 6
  • in fact, Bootstrap is already made to use the flexbox system. So you can handle it with the bootstrap flexbox class. – CanUver Jun 22 '20 at 13:13

3 Answers3

1

if you say you want to do it using flexbox without using bootstrap necessarily, you can build such a structure.

each column will have its own content up to in length. and when the page gets smaller, the items that don't fit will be wrapped one by one.

.row {
  display: flex;
  flex-wrap: wrap;
}

.row>.col {
  flex: 1 1 auto;
}
<ul class="row">
  <li class="col">Menu Item 1</li>
  <li class="col">Menu Item 2 with much longer menu title</li>
  <li class="col">Menu Item 3 with long title</li>
  <li class="col">Menu Item 4</li>
  <li class="col">Menu Item 5</li>
  <li class="col">Menu Item 6</li>
  <li class="col">Menu Item 7</li>
</ul>

Please tell me if I misunderstood you.

CanUver
  • 1,756
  • 2
  • 6
  • 19
  • Thanks for your comment! I've replaced the code I was using (in my solution) with yours. It's more clean and simplistic and does what I need it to. Thanks! – Anne Jun 22 '20 at 13:30
0

Maybe you are using Bootstrap without really need it.

If you really want to use grid system of Bootstrap, have a look on documentation Bootstrap - Grid system which explain you how to use col to automatically adapt the width according to how many other col there are, or set the size yourself with col-6 to get a 50% width col-3 to get 25%, ...

But, I think, for your menu you don't really need to specify column. Just use basic ul and li and add a display: inline-block to get them on one single line.

By the way, are you trying to build a navbar ? If so, have a look on Bootstrap - Navbar

D. Schreier
  • 1,700
  • 1
  • 22
  • 34
  • I just posted the fix I used. In regards to your suggestions: 'Col' spaces it out evenly, as I mentioned, but it makes all columns equal width which is not great in this scenario. Setting manual sizes doesn't really work if you don't know how many menu items there are either. 'display:inline-block' gives them all the correct width, but it puts everything to the left side rather than filling the full width of the parent container as I wanted. I ended up using custom flexbox styling - feel free to have a look :) – Anne Jun 22 '20 at 13:26
0

Update: I figured out the answer! Bootstrap's core styling options couldn't do what I needed it to within the 'col' setup, so I used my own flexbox styling to override it and fixed the problem.

'Col' has 'flex-basis:0' as standard styling, as well as 'width:100%' which was forcing everything to have an equal width. I overwrote those values with my own css and got everything to fit neatly:

li {
    position: relative;
    width: auto;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    flex-basis: auto;
    flex-grow: 1;
    max-width: 100%;
}
Anne
  • 111
  • 6