Question

我有一个3列的网格，并在行上，每列中都有一个容器。但是我有一个奇怪的显示：

正常显示应该是这样的：

我的3列是：我的导航栏，我的卡片网格和一张卡片上的“缩放”。我希望导航栏和“缩放”列固定在顶部，所以当我向下滚动时，只有网格在滚动。因此，我将导航栏的属性固定在顶部，这样就可以了。但是，当我对缩放列执行相同的操作时，我得到了奇怪的布局。

我的html正文：

    <body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
        <div class="container-fill main_container">
            <div class="row no-gutters">
                <div class="col-sm-2 side_bar_n">  <!-- Nav bar here -->
                    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
                        ........ 

                    </ul>
                </div>
                <div class="col-sm-7">  <!-- Card grid -->
                    <div class="container grid_container">
                      <h1>Recherche de carte</h1>
                      <div class="row no-gutters">
                          <div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
                            ........
                          <div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>

                      </div>
                    </div>
                </div>
                <div class="col-sm-2"> <!-- Card display -->
                    <div class="container-fluid fixed-top">
                        <div class="card card_body">
                          <img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
                              <div class="card-body">
                                <h4 class="card-title">Rythme of the Wild</h4>
                                <p class="card-text">Creature spells you control can't be countered.
                                                    NonToken creatures you control have riot (+1/+1 or haste when entering the battlefield.)</p>
                                <a href="#" class="btn btn-primary">See Profile</a>
                              </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </body>

Answer 1

从卡片显示区中删除container-fluid fixed-top ...

也将卡col设置为col-sm-3

See fiddle

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  
<body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
  <div class="container-fill main_container">
    <div class="row no-gutters">
      <div class="col-sm-2 side_bar_n">
        <!-- Nav bar here -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
          ........

        </ul>
      </div>
      <div class="col-sm-7">
        <!-- Card grid -->
        <div class="container grid_container">
          <h1>Recherche de carte</h1>
          <div class="row no-gutters">
            <div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
            ........
            <div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>

          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <!-- Card display -->
        <div class="">
          <div class="card card_body">
            <img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
            <div class="card-body">
              <h4 class="card-title">Rythme of the Wild</h4>
              <p class="card-text">Creature spells you control can't be countered. NonToken creatures you control have riot (+1/+1 or haste when entering the battlefield.)</p>
              <a href="#" class="btn btn-primary">See Profile</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

尝试将afterAll()类添加到想要在右侧的列中，还将float-right类添加到所有分类为clearfix的div中。我在以下代码中完成了此操作。

container

引导程序，列未对齐

2 个答案: