我正在研究反应项目,因为我有一个锚标签,然后我有一个导航栏。问题是锚标签将导航栏推到右侧。因为锚标签占用了额外的空白。我什至尝试过使用display: 'inline-block',但它不起作用。Navbar.jsimport React, { Component } from 'react';import './Navbar.css';import { Link } from 'react-router-dom';class Navbar extends Component { render() { return ( <div className='container-fluid custom'> <div className='container'> <div className='row'> <div className='col-12'> <nav className="navbar navbar-expand-lg navbar-light bg-light"> <a className="navbar-brand space" href="www.facebook.com"> <div className='logo'> <img src='assets/images/kaboom.png' alt='logo'></img> </div> </a> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarNav"> <ul className="navbar-nav"> <li className="nav-item active"> <Link className='nav-link' to='/'>Home</Link> </li> </li> </ul> </div> </nav> </div> </div> </div> </div> ) }}
2 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
如果您可以向我们提供一个片段或其他内容会更好,但无论如何您可以使用任何浏览器的开发人员工具找出导致空白的原因,它可能是边距或填充,只需打开它并指向您的元素以找出然后您可以通过应用margin:0
或padding:0
应用于该元素来解决问题 ,希望我能提供帮助!
一只名叫tom的猫
TA贡献1906条经验 获得超3个赞
不要在锚标签内使用 div 。只需将徽标包装在锚标签中,并为该 img 标签指定任何宽度。像这样:
<a className="navbar-brand space" href="www.facebook.com">
<img src='assets/images/kaboom.png' width="150" alt='logo'></img>
</a>
添加回答
举报
0/150
提交
取消