Question

在使用Bootstrap网格系统学习和整理网站时，我有点困惑。我正在制作一个由3个街区组成的菜单 - ＆＃34;卡片＆＃34;还有一个是固定的（当你滚动时跟随）＆＃34; list-group＆＃34;。一直在尝试使用浮动：正确等等，但当我改变某些东西时会拉动＆＃34; list-group＆＃34;一切都好了。

HTML：

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">

      <div class="side">
        <div class="row">
          <div class="col-sm-3" style="background:red">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="row">
          <div class="col-sm-3" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="w-100"></div>

          <div class="col-sm-3" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

＆＃13;

感谢我得到的每一个有用的答案！

Answer 1

试试这段代码

.container {
  position: relative;
}
.side {
 position: absolute;
 right: 0;
 top:0;
 bottom: 0;
 width: 250px;
 z-index: 1;
 background-color: #fff;
}

.content {
  margin-right: 250px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">

      <div class="side">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
      </div>

      <div class="content">
        <div class="row">
          <div class="col-sm-3" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

使用bootstrap

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
       <div class="row no-gutters">
          <div class="col-lg-9 col-sm-8">
             <div class="content">
        <div class="row">
          <div class="col-sm-6" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>
          </div>
          <div class="col-lg-3  col-sm-4">
                <div class="side">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
      </div>

          </div>
       <div>

   
      
      

    </div>

Answer 2

所以我用补充CSS获得了最好的结果。首先，您必须对您的HTML进行一些更改。首先，将列表中的班级更改为col-sm-12而不是col-sm-3。当你添加下面的CSS时，这将是有意义的。对您进行HTML的第二个更改是将container更改为container-fluid。这不是必要的，但在我看来它使它看起来更干净。完成设置后，您可以添加以下CSS以将列表固定到页面一侧的垂直中心位置：

@media(min-width:576px){
  .side{
    position: fixed;
    right: 0;
    top: 40%;
    width:25%;
    max-width: 25%;
    padding-left:15px;
  }
}

此css将修复列表，使其保持放置，即使在滚动时也是如此。 right: 0;将其修复到页面的右侧，然后top:40%;将其向下推到页面的中心;您可以使用top值进行游戏，以根据列表的长度准确地获取所需值。这是一个代码片段，以便您可以看到它的实际效果：

@media(min-width:576px) {
  .side {
    position: fixed;
    right: 0;
    top: 40%;
    width: 25%;
    max-width: 25%;
    padding-left: 15px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">

  <div class="side">
    <div class="row">
      <div class="col-sm-12" style="background:red">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
          <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="row">
      <div class="col-sm-3" style="background:cyan">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-3" style="background:yellow">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-3" style="background:orange">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="w-100"></div>

      <div class="col-sm-3" style="background:red">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

希望这可以帮助你。

排名＆＃34; list-group＆＃34;在右侧，而＆＃34;卡＆＃34;在左侧，Bootstrap

2 个答案: