在CSS上苦苦挣扎，单击下拉菜单时位置会移动，并且在ReactJS / Bootstrap中苦苦挣扎使其变大

编程问答 2023-10-29

问题描述

我在单击dropdown icon的大小和位置时有点挣扎，为什么要移动位置，如果我将<a>标记更改为<button>，则{ signin icon变小 。任何建议，请问为什么我要面对这个问题，最好的方法是什么（我调整了CSS，但仍然没有帮助）。谢谢

Note：如果我将标签更改为按钮，则下拉列表不会移动，但登录图标的大小会变小

  • 点击前

enter image description here

  • 单击后，下拉箭头位置向上移动，但单击时用户图标位置保持不变

enter image description here

      return (
        <nav className="header">
          <label className="logo">
            <a href="/">
              <img className="yoga-image" src={Projectlogo} />
            </a>
          </label>
    
          <ul>
            <li>
              <a   // if i change this to button then the dropdown dont move but signin incon size becomes smaller
                className="glyphicon glyphicon-shopping-cart
    "
                href="./basket"
              ></a>
            </li>
            <li  >
              <Dropdown as={ButtonGroup} style={{marginTop:"5px",position: "relative",float: "left",top: "13px" }}>
                <Button variant="success" href="./signin" style={{ background: "none",borderStyle: "none",outline: "none !important" }}>
                  {userstatus ? (
                    <a
                      style={{ border: "none",background: "none",outline: "none" }}
                      className=" signin-icon glyphicon glyphicon-user  
                    "
                    ></a>
                  ) : (
                    <button style={{ border: "none",outline: "none" }}>SIGNIN</button>
                  )}
                </Button>
    
                <Dropdown.Toggle
                  className="signinDropdown"
                  split
                  variant="success"
                  id="dropdown-split-basic"
                  style={{ background: "none",outline: "none !important" }}
                />
    
                <Dropdown.Menu>
                  <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                  <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                  <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown>

- Css代码段 

.signinDropdown {
  background: none;
  border-style: none;
  outline: none !important;
}

.signinDropdown:focus,signinDropdown.focus {
  outline: none;
  Box-shadow: none;
  background-color: none;
  Box-shadow: none !important;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4glyphiconsjavascriptreactjsreactjsreactjsreactjs