css 如何防止Bootstrap横幅换到下一行？

kyxcudwk 于 2023-01-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(170)

我正在用Bootstrap制作一个顶部横幅，我的压缩菜单总是在1024x768的情况下换行。这在分辨率大于1024x768的情况下效果很好。请建议更正我的html，以便横幅在1024x768分辨率的情况下固定在顶部。横幅文本必须居中，徽标应该在左边，登录用户名应该在右边。

.headerBackGroundColor {
  background-color: cyan;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
  <div class="logo">
    <a href="">
      <img src="https://via.placeholder.com/100" alt="Title" />
    </a>
  </div>

  <div class="navbar-header navbar-brand">
    Application Title on Banner Goes Here
  </div>

  <div class="navbar-nav nav navbar-right">
    <button class="btn btn-default" type="button" style="cursor:default !important;">
      <span class="user-name">
        Welcome loggedInUser
       </span>
    </button>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/74996721/how-can-i-prevent-my-bootstrap-banner-from-wrapping-to-next-line

1条答案

按热度按时间

rekjcdws1#

你觉得这个好看吗？

.headerBackGroundColor {
  background-color: cyan;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
  <div class="container">
    <div class="row w-100 justify-content-md-around row-cols-3">
      <div class="col-lg-auto">
        <div class="logo">
          <a href="">
            <img src="https://via.placeholder.com/100" alt="Title" />
          </a>
        </div>
      </div>
      <div class="col-lg-auto d-flex align-items-center">
        <div>Application Title on Banner Goes Here</div>
      </div>
      <div class="col-lg-auto d-flex align-items-center">
        <div class="navbar-nav nav navbar-right">
          <buttonclass="btn btn-default" type="button" style="cursor:default !important;">
            <span class="user-name"> Welcome loggedInUser </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-06

我来回答

css 如何防止Bootstrap横幅换到下一行？

1条答案

相关问题

热门标签

最新问答