html - 将“list-group”放在右侧，而“cards”在左侧，Bootstrap

Question

在学习和将网站与 Bootstrap 网格系统放在一起时，我有点困惑。我正在制作一个由 3 个块组成的菜单 - “卡片”和一个固定的（滚动时跟随）“列表组”。一直在尝试使用 float:right 等，但是当我更改将“列表组”拉到右侧的东西时，一切都会中断。

HTML：

<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>

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

标签： htmlcsstwitter-bootstrap

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>

使用引导程序

<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>