Question

实际上，我正在尝试使用Bootstrap网格系统构建页面，但是不会像我想要的那样设置内容。

实际上，我会有1列包含数据选择器1列包含2行，其中1列包含3个圆图，而1列包含条形图。

问题在于带有图表的列而不是位于数据选择器列右侧的列正在下降。

这是它的样子

我会怎么做

这是该网格的代码

                <div class="row">
                    <div class="col-auto">
                        <div class="card text-center card-date">
                            <div class="card-body">
                                <div id="datepicker"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col">

                        <div class="row">
                            <div class="col">
                                <div class="card">
                                    <div class="card-body text-center">
                                            <canvas id="barchart1"></canvas>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <div class="card-body text-center">
                                            <canvas id="barchart2"></canvas>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <div class="card-body text-center">
                                            <canvas id="barchart3"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <canvas id="barchart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

Answer 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row align-items-top">
      <div class="col-md-3">
        <div class="card text-center card-date">
          <div class="card-body">
            <div id="datepicker"></div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
         <div class="row">
           <div class="col-md-4">
             <div class="card">
               <div class="card-body text-center">
                 <canvas id="barchart1"></canvas>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card">
               <div class="card-body text-center">
                 <canvas id="barchart2"></canvas>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card">
               <div class="card-body text-center">
                 <canvas id="barchart3"></canvas>
               </div>
             </div>
           </div>
         </div>
        <div class="row mt-5">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <canvas id="barchart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  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>

在使用.container之前先使用.row

容器提供了一种使您网站的居中和水平填充的方法内容。使用.container作为响应像素宽度或 .container-fluid的宽度：在所有视口和设备上均为100％大小。
行是列的包装。每列都有水平填充
（称为装订线）以控制它们之间的空间。这个
然后以负边距抵消行上的填充。这个方式，您列中的所有内容在视觉上都向下对齐
左侧。

Answer 2

我在Bootstrap 4中完全使用了您的代码，并且收到了预期的结果。也许您的屏幕很小，却显示在下面？

<!DOCTYPE html>
<html lang="en">
  <style>
    #datepicker {
      width: 18rem  
    }
</style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <body>
    <div class="row">
      <div class="col-auto">
          <div class="card text-center card-date">
              <div class="card-body">
                  <div id="datepicker">date picker</div>
              </div>
          </div>
      </div>

      <div class="col">

          <div class="row">
              <div class="col">
                  <div class="card">
                      <div class="card-body text-center">
                              <canvas id="barchart1"></canvas>
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="card">
                      <div class="card-body text-center">
                              <canvas id="barchart2"></canvas>
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="card">
                      <div class="card-body text-center">
                              <canvas id="barchart3"></canvas>
                      </div>
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-12">
                  <div class="card">
                      <div class="card-body">
                          <canvas id="barchart"></canvas>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </body> 
</html>

Answer 3

使用网格可能取决于您的响应策略，但是如果我犯了一个错误，类似的事情就可以解决问题。

<div class="row">
  <div class="col-md-4">
    <div class="card text-center card-date">
      <div class="card-body">
        <div id="datepicker"></div>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-body text-center">
            <canvas id="barchart1"></canvas>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body text-center">
            <canvas id="barchart2"></canvas>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body text-center">
            <canvas id="barchart3"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <canvas id="barchart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

引导网格布局未正确显示

3 个答案: