display:inline-block is not working in Bootstrap
Question
Here is my Navbar component:
const Navbar = () => {
return (
<div className='Navbar'>
<ul className='list-group w-75 mx-auto'>
<li className='list-group-item'>
<i className='fab fa-twitter' id='twitter' />
</li>
{nav.map((item) => (
<Nav key={v4()} iconClass={item.iconClass} name={item.name} />
))}
<li className='mx-auto'>
<button className='btn butn p-3'>Tweet</button>
</li>
</ul>
</div>
);
};
export default Navbar;
And my Nav component:
const Nav = ({ iconClass, name }) => {
return (
<li onClick={onClick} className='d-flex align-items-center list-group-item'>
<i className={iconClass} />
<span>{name}</span>
</li>
);
};
export default Nav;
All li 's are display: block . I want them to be display: inline-block . But it is not working. I've tried using Bootstrap, in my own .scss file, inline styling. But no change. Can you help, please?
1 answers
solution1
1 ACCPTED 2021-01-28 16:17:29
Adding style="display: inline-block" to Bootstrap list-group items will have no effect, because Bootstrap list-group uses flexbox, with items oriented vertically (column):
.list-group {
display: flex;
flex-direction: column;
}
.list-group-item {
position: relative;
display: block;
}
If you want the items in a list group to be horizontal rather than vertical, add the list-group-horizontal class to the list-group element, which changes the default list-group flex direction from column (vertical) to row (horizontal).
To illustrate this, here is the HTML that would be produced by the code in the question above:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css"> </head> <body class="p-4"> <h4>Existing Navbar</h4> <div class="navbar"> <ul class="list-group w-75 mx-auto" style="background-color: #e0e0e0"> <li class="list-group-item"> <i class="fab fa-twitter" id="twitter"></i> </li> <!-- some items to stand in for Nav components --> <li onclick="alert('ambulance')" class="d-flex align-items-center list-group-item"> <i class="fas fa-ambulance"></i> </li> <li onclick="alert('apple')" class="d-flex align-items-center list-group-item"> <i class="fas fa-apple-alt"></i> </li> <li onclick="alert('baby carriage')" class="d-flex align-items-center list-group-item"> <i class="fas fa-baby-carriage"></i> </li> <li onclick="alert('biking')" class="d-flex align-items-center list-group-item"> <i class="fas fa-biking"></i> </li> <li class='mx-auto'> <button class='btn butn p-3'>Tweet</button> </li> </ul> </div> </body>
Notice that the orientation of the list-group items is vertical.
Here is that same HTML result, with list-group-horizontal added:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css"> <body class="p-4"> <h4>Modified Navbar</h4> <p>Changes:</p> <ul> <li>Removed "d-flex" from all list group items (had no effect)</li> <li>Added "list-group-horizontal" to ul (puts all li elements on same line) </li> </ul> <div class="navbar"> <ul class="list-group w-75 mx-auto list-group-horizontal" style="background-color: #e0e0e0"> <li class="list-group-item"> <i class="fab fa-twitter" id="twitter"></i> </li> <!-- some items to stand in for Nav components --> <li onclick="alert('ambulance')" class="align-items-center list-group-item"> <i class="fas fa-ambulance"></i> </li> <li onclick="alert('apple-alt')" class="align-items-center list-group-item"> <i class="fas fa-apple-alt"></i> </li> <li onclick="alert('baby-carriage')" class="align-items-center list-group-item"> <i class="fas fa-baby-carriage"></i> </li> <li onclick="alert('biking')" class="align-items-center list-group-item"> <i class="fas fa-biking"></i> </li> <li class='mx-auto'> <button class='btn butn p-3'>Tweet</button> </li> </ul> </div> </body>
For completeness, here is the code from the question, with list-group-horizontal added to the <ul> :
const Navbar = () => {
return (
<div className='Navbar'>
<ul className='list-group w-75 mx-auto list-group-horizontal'>
<li className='list-group-item'>
<i className='fab fa-twitter' id='twitter' />
</li>
{nav.map((item) => (
<Nav key={v4()} iconClass={item.iconClass} name={item.name} />
))}
<li className='mx-auto'>
<button className='btn butn p-3'>Tweet</button>
</li>
</ul>
</div>
);
};
export default Navbar;
And the Nav component, with d-flex removed from the <li> :
const Nav = ({ iconClass, name }) => {
return (
<li onClick={onClick} className='align-items-center list-group-item'>
<i className={iconClass} />
<span>{name}</span>
</li>
);
};
export default Nav;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.