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

我使用Bootstrap 4和最新的ReactJS。

阵营/ 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的margin-left

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

1 个答案: