Bootstrap 指定列宽而不换行

xlpyo6sf 于 2023-05-15 发布在 Bootstrap

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

我有下面的HTML / CSS的导航栏使用Bootstrap。
也可以看到我想让它看起来如何的屏幕截图，基本上我想让导航排列在#three的左侧，并且它的宽度也和它一样。

我试图避免 Package 在一个col-md-4，但是，因为它搞乱了移动的导航在WP主题，我正在使用。
是否可以通过向现有元素添加任何其他类或样式来对齐它们？

<html>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <style type="text/css">
        
        #nav-main {
            background-color: blue;
        }

        #nav {
            background: red;
        }

        #three {
            background-color: green;
        }

        #header-top div div {
            padding-top: 30px;
            font-weight: bold;
        }

    </style>
    <body>


        <div id="page" class="site">

            <header id="masthead" class="site-header">
    
                <div class="fixed-top bg-light">
                    <div id="header-top" class="container">
                        <div class="row">
                            <div class="col-md-4">
                                01
                            </div>
                            <div class="col-md-4">
                                02
                            </div>
                            <div id="three" class="col-md-4">
                                03
                            </div>
                        </div>
                    </div>



        <nav id="nav-main" class="navbar navbar-expand-lg">

            <div class="container">

                <!-- Navbar Brand -->
                <div>
                    <a class="navbar-brand md" href="#">
                        LOGO
                    </a>
                </div>

                <div id="nav" class="d-none d-md-block">
                    
                    <ul id="bootscore-navbar" class="navbar-nav ">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
                            <a href="#" class="nav-link ">ONE</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
                            <a href="#" class="nav-link ">TWO</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
                            <a href="#" class="nav-link ">THREE</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
                            <a href="#" class="nav-link ">FOUR</a>
                        </li>
                        </ul>
                    
                </div>

            </div><!-- .container -->

        </nav>

        </div>
    </header>
</div>
        



    </body>
</html>

我试过.ms-auto，但它只是向右对齐...我也试过把它们 Package 在额外的列中，但它阻止了移动的导航的打开

twitter-bootstrap

来源：https://stackoverflow.com/questions/76247279/specifying-column-widths-without-wrapping-in-extra-columns

1条答案

按热度按时间

z4iuyo4d1#

<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <style>
        .navbarRight { padding-right:0 !important; }
        .navbarRight { padding-left:0 !important; }
    </style>


</head>

<body>
  <header>
    <!-- place navbar here -->

    <div class="container-fluid">
        <div class="row">
          <div class="col-md-4 bg-primary">
            Logo
          </div>
          <div class="col-md-4 bg-secondary">
            Navbar Menu
          </div>
          <div class="col-md-4">
            <div class="container navbarRight">
                <div class="row">
                  <div class="col-md-3 bg-info">
                    one
                  </div>
                  <div class="col-md-3 bg-danger">
                    two
                  </div>
                  <div class="col-md-3 bg-warning">
                    three
                  </div>
                  <div class="col-md-3 bg-primary">
                    four
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>

  </header>

  <main>

  </main>
  <footer>
    <!-- place footer here -->
  </footer>
  <!-- Bootstrap JavaScript Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
  </script>
</body>

</html>

赞(0）回复(0）举报 2023-05-15

我来回答

Bootstrap 指定列宽而不换行

1条答案

相关问题

热门标签

最新问答