How to arrange Bootstrap lists horizontally?

How to arrange Bootstrap list horizontally? Place the list item in a row with the row class. Use the col class to control the width of the list item, such as col-md-4 to represent 4 columns under medium screen size. The inner and outer margins can be adjusted using p-2 and mx-2. Use d-flex flex-wrap to enable flexbox on row for automatic line wrapping. Use col-md-auto to make the list items occupy the required width automatically.

Bootstrap list horizontal arrangement? This question is awesome! Many novices will get stuck here, but it is not that complicated. The key is to understand Bootstrap's grid system and some tips. In this article, I will take you from basics to advanced, completely sorting out the horizontal arrangement of the Bootstrap list, and share some pitfalls and some unique secrets that I have stepped on over the years.

Let’s talk about the basics first. You have to understand how Bootstrap is laid out using a grid system. It uses row and col classes to control the arrangement of elements. row represents a row, and col- is followed by a number, indicating how many columns the element occupies. For example, col-md-4 means occupies 4 columns under medium screen size, with a total of 12 columns. If you don’t understand this grid system, the ones behind it will be useless.

Now, let's go straight to the topic: How to arrange the list horizontally? The simplest and most crude method is to put the list item li in row , and then use col class to control the width of each li . Like this:

 <code class="html"><div class="row"> <div class="col-md-4"> <li>Item 1</li> </div> <div class="col-md-4"> <li>Item 2</li> </div> <div class="col-md-4"> <li>Item 3</li> </div> </div></code>

Have you seen it? col-md-4 allows each list item to occupy 4 columns, and three items occupy just one row, arranged perfectly horizontally! Of course, you can also use col-sm- , col-lg- , etc. to control the arrangement of different screen sizes, depending on your design needs.

But wait! This is just the most basic usage. In actual application, you may encounter more complex situations. For example, the width of the list item is not fixed, or you want to have spacing between the list items.

At this time, you need to use other classes provided by Bootstrap. p-2 can add inner margins, mx-2 can add horizontal margins. You can adjust these values ​​as needed.

Going further, what if you want the list items to wrap automatically, keep them horizontally, but automatically wrap them to the next line when they exceed the screen width? This requires flexbox. Adding d-flex flex-wrap class to row can achieve this effect.

 <code class="html"><div class="row d-flex flex-wrap"> <div class="col-md-auto p-2"> <li>Item 1</li> </div> <div class="col-md-auto p-2"> <li>Item 2</li> </div> <div class="col-md-auto p-2"> <li>Item 3</li> </div> <div class="col-md-auto p-2"> <li>Item 4</li> </div> <!-- 可以添加更多列表项--> </div></code>

Here col-md-auto lets each list item automatically occupy the required width, while flex-wrap allows line wrapping. Remember p-2 , this will help you easily control spacing and avoid list items crowding together.

Finally, some experience: Don’t rely too much on the default style of Bootstrap, learn to adjust according to your needs. Try different combinations of classes and attributes to find the best solution for your project. Don’t be afraid to try, boldly modify the code and learn from the mistakes, so that you can become a true Bootstrap master! Remember, practice brings true knowledge!

The above is the detailed content of How to arrange Bootstrap lists horizontally?. For more information, please follow other related articles on the PHP Chinese website!