当图片放在右侧时，文本会稍微向左移动 Bootstrap 4

Question

我正在尝试完美对齐所有内容，但是当我将图像添加到行中的最后一个元素时，它会向左移动。以下示例。

When the image is added to the last element in the row

When the image is not added to the the last element in the row

我正在使用带有最新 ReactJS 的 Bootstrap 4。

反应/HTML

import React, { Component } from 'react';
class NavigationBar extends Component {
render() {
    return (
        <div>
            {/* Navigation bar */}
            <nav className="navbar navbar-expand-lg header">
                {/* Wrap the code inside this div in a container */}
                <div className="container">
                    {/* Navigation bar brand*/}
                    <a href="#" className="navbar-brand">
                        <img src="../../imgs/logo.png" className="header-brand" alt=""/>
                    </a>
                    {/* Pull the wrapped code to the right*/}
                    <div className="pull-right">
                        {/* Dropdown Menu */}
                        <div className="dropdown">
                            {/* Profile button to open multiple options */}
                            <button className="dropdown-toggle header-dropdown"
                                    type="button"
                                    data-toggle="dropdown"> Username
                                {/* Arrow down to show that it's a dropdown menu */}
                            </button>
                            {/* Dropdown Items */}
                            <ul className="dropdown-menu dropdown-menu-right">
                                <li>
                                    <a className="dropdown-item" href="#">
                                        <img className="dropdown-picto" src="../../imgs/settings.png" alt=""/>
                                        Instellingen
                                    </a>
                                </li>
                                <div className="dropdown-divider" />
                                <li>
                                    <a className="dropdown-item" href="#">
                                        <img className="dropdown-picto" src="../../imgs/support.png" alt=""/>
                                        Support
                                    </a>
                                </li>
                                <div className="dropdown-divider" />
                                <li>
                                    <a className="dropdown-item" href="#">
                                        <img className="dropdown-picto" src="../../imgs/logout.png" alt=""/>
                                        Log uit
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    );
} }export default NavigationBar;

CSS

.hub {
background-color: #fff;
color: #666666;
height: 4.5rem;
border-bottom: solid #e2e2e2 0.5px;
margin-bottom: 3rem;
}

.hub-item {
color: #666666;
text-decoration: none;
margin-left: 5px;
font-size: 16px;
}

.hub-picto {
height: 35%;
width: 15%;
padding-right: 5px;
}

Answer 1

尝试在 css 文件中移除 hub-item 的左边距