Bootstrap 4网格系统问题

时间：2018-04-09 18:19:41

标签： html css bootstrap-4 grid-layout

我是Bootstrap的新手，现在我已经在网格上挣扎了3个多小时。我已经在Stackoverflow上阅读了很多其他帖子，尝试过所有内容，但我做错了什么，我无法弄清楚。请不要将我的帖子标记为重复，因为我已阅读所有其他帖子，但无法找到解决方案。

我正在设计一个仪表板，一切都很好，直到我到达第二排，现在我被卡住了。这就是我想要实现的目标（粉红色的盒子是我能够做到的）。

This is what I want to achieve (the pink boxes are the ones I can't get right. They fall to a new row.)

这是我的代码：

＆＃13;
＆＃13; 
/* Body */

body {
  margin-top: 54px;
}


/* Top Navbar */

.navbar li {
  font-size: 12px;
}


/* Sidebar */

.sidebar {
  background-color: #F8F9FA;
  padding-right: 18px;
}


/* Sidebar Table */

.sidebar-table {
  font-size: 10px;
  overflow: scroll;
}


/* Main Frame */

.main-frame,
.nueva-orden-frame,
.volumen-transado-frame {
  border: 1px solid #DEE2E6;
  background-color: #fff;
  margin-top: 2px;
  padding: 0;
  color: #212529;
  height: 55%;
}

.main-frame-header,
.nueva-orden-frame-header,
.volumen-transado-frame-header {
  width: 100%;
  margin: 0 auto;
  background-color: #edeef0;
  padding: 7px 16px 0px 16px;
}

.btn-group-bg {
  background-color: #edeef0;
  padding-top: 7px;
  border-top: 1px solid #DEE2E6;
  margin-top: 2px;
}

.btn-group-order-book {
  width: 90%;
}

.btn-order-book {
  width: 100%;
}

.section-title {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
}

.btn-comprar,
.btn-vender {
  padding-left: 70px;
  padding-right: 70px;
  background-color: #fff;
  border-color: #007bff;
  color: #007bff;
}

.main-frame-right-info {
  font-size: 13px;
  color: #212529;
}

.card-size {
  height: 168px;
}


/* Nueva Orden Frame */

.nueva-orden-frame {
  height: 294px;
  border-left: none;
}

.historial-ordenes-table {
  font-size: 10px;
}


/* Volumen Transado Frame */

.sub-header-compra-venta {
  font-size: 11px;
  font-weight: bold;
  background-color: #b9baba;
  height: 294px;
}

.nueva-orden-frame {
  border-left: none;
}
＆＃13; 
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/custom.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
  <title>Avesta Wallet</title>
</head>


<body>
  <!-- Top Navbar -->
  <nav class="navbar navbar-expand navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">AVESTA</a>
    <ul class="navbar-nav mr-auto">
      <!-- BTC Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BTC/CLP CLP$4.049.997 24h<i class="fas fa-angle-down"></i> 4.3%
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Information here</a>
        </div>
      </li>
      <!-- Saldo Disponible Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Saldo Disponible ฿0,000000 $0
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Information here</a>
        </div>
      </li>
      <!-- User Logout -->
      <li class="nav-item">
        <a class="nav-link" href="#">
          Logout <i class="fas fa-sign-out-alt"></i>
        </a>
      </li>
    </ul>
  </nav>

  <!-- Sidebar -->
  <div class="row" style="border: 3px solid red;">
    <div class="col-lg-3 col-md-3 col-sm-12 pr-0 text-center sidebar">
      <div class="btn-group-bg">
        <div class="btn-group btn-group-sm text-right pb-2 btn-group-order-book" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary btn-order-book">Order Book</button>
          <button type="button" class="btn btn-primary pr-3 pl-3">Transaction History</button>
        </div>
      </div>
      <!-- TABLE WITH INFORMATION STARTS HERE -->
      <table class="table table-sm table-fixed sidebar-table">
        <thead>
          <tr>
            <th scope="col">Cantidad</th>
            <th scope="col">Precio</th>
            <th scope="col">Acumulado</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
          <tr>
            <td>฿0,080616</td>
            <td>$4.086.469</td>
            <td>฿3,955796</td>
          </tr>
        </tbody>
      </table>
      <!-- /TABLE WITH INFORMATION ENDS HERE -->
    </div>


    <!-- "Nueva Orden Frame" -->
    <div class="col-lg-4 col-md-4 col-sm-12 main-frame">
      <div class="main-frame-header">
        <div class="d-inline-block">
          <p class="section-title">Nueva Orden</p>
        </div>
        <div class="float-right">
          <div class="btn-group btn-group-sm text-right" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Límite</button>
            <button type="button" class="btn btn-primary">Mercado</button>
          </div>
        </div>
      </div>
      <div>
        <div class="text-center mt-2">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary btn-block btn-comprar">Comprar</button>
            <button type="button" class="btn btn-primary btn-vender">Vender</button>
          </div>
        </div>
        <div class="main-frame-input col-lg-12 pb-3">
          <!-- Form -->
          <form class="col-lg-6 d-inline-block">
            <div class="form-group mt-2 mb-1">
              <label class="small" for="formGroupExampleInput">Cantidad</label>
              <input type="text" class="form-control form-control-sm" id="formGroupExampleInput" placeholder="AVE">
            </div>
            <div class="form-group mt-0">
              <label class="small" for="formGroupExampleInput2">Precio</label>
              <input type="text" class="form-control form-control-sm" id="formGroupExampleInput2" placeholder="CLP">
            </div>
            <div>
              <button type="button" class="btn btn-success btn-sm btn-block">Vender</button>
            </div>
          </form>
          <!-- /Form-->
          <div class="main-frame-right-info col-lg-6 d-inline-block float-right mt-3">
            <div class="card card-size">
              <div class="card-body">Bitcoin a gastar <br /> ฿0,000000 <br /> Pesos a recibir <br /> - <br /> Tarifa de 0.0 % aplicada
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /Nueva Orden Frame -->


    <!-- Mis Órdenes Frame -->
    <div class="col-lg-5 col-md-5 col-sm-12 nueva-orden-frame">
      <div class="nueva-orden-frame-header">
        <div class="d-inline-block">
          <p class="section-title">Mis Órdenes</p>
        </div>
        <div class="float-right">
          <div class="btn-group btn-group-sm text-right" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Historial</button>
          </div>
        </div>
      </div>
      <div>
        <div class="text-center mt-2">
          <!-- Aquí se coloca la Datatable -->
          <table class="table table-sm historial-ordenes-table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Item</th>
                <th scope="col">Item</th>
                <th scope="col">Item</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">4</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">5</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">6</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">7</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
              <tr>
                <th scope="row">8</th>
                <td>Info</td>
                <td>Info</td>
                <td>Info</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row d-flex p-2 justify-content-start">
        <div class="col-lg-12 col-md-12" style="border: 1px solid blue;">
          <div class="col-lg-6 col-md-6" style="border: 1px solid red;">Column with 6</div>
        </div>
      </div>
    </div>
    <!-- /Mis Órdenes Frame -->

    <!-- VOLUMEN TRANSADO STARTS HERE -->
  </div>
































  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

谢谢，请记住我是BS4的新手，所以请不要标记我的帖子：）

1 个答案:

答案 0 :(得分：0)

以下是如何设置bootstap html标记以获取布局的示例。

<body>
    <div class="container">
      <div class="row">
        <div class="col-12 gray">Top Navigation</div>
      </div>
      <div class="row">
        <div class="col-3 gray">
          Side Table
        </div>
        <div class="col-9 gray">
          <div class="row">
            <div class="col-5 gray">Box 1</div>
            <div class="col-7 gray">Box 2</div>
          </div>
          <div class="row">
            <div class="col-9 pink">Box 3</div>
            <div class="col-3 pink">Box 4</div>
          </div>
        </div>
      </div>
    </div>
  </body>

在这里插入：https://embed.plnkr.co/pP7QiafQzg0vdIa2eTu6/

相关问题
最新问题