时间戳

首页 > 解决方案 > 引导网格列未正确显示

html - 引导网格列未正确显示

问题描述

我在使用引导程序时遇到了问题，就我的一生而言，我似乎无法让我的列正常工作。我确信这很简单，但我在过去一个小时左右一直在尝试，但无济于事

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script src="public/assets/js/tabulator.min.js"></script>
<script src="public/assets/js/table.js"></script>
<p></p>
<!-- Begin page -->
<div id="wrapper">
  <!--?php include 'layouts/navbar.php'; ?-->
  <div class="content-page">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h3>Job Header Infomation</h3>
            <div class="container">
              <div class="row">
                <form action="" method="POST">
                  <div class="col-sm">
                    <!-- Form Input -->
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-md">Description</span></div>
                      <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Design</span></div>
                      <select class="form-control" id="form-door-design" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Finish</span></div>
                      <select class="form-control" id="form-door-finish" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Edge</span></div>
                      <select class="form-control" id="form-door-edge" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Board Thickness</span></div>
                      <select class="form-control" id="form-door-board" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door Colour</span></div>
                      <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                    </div>
                  </div>
                  <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-md">Description</span></div>
                      <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
                    </div>
                  </div>
                  <div class="col-sm"></div>
                </form>
              </div>
            </div>
            <h3>
              <!-- <pre><?php //Door_Pricing(); ?></pre> --> <br /> <button class="btn btn-primary w-md waves-effect waves-light" onclick="addRow()">Save</button></h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--<?php include 'layouts/footer.php'; ?>-->
<p></p>
<!--?php include 'layouts/footerScript.php'; ?-->


<script src="public/plugins/peity-chart/jquery.peity.min.js"></script>

它应该是三列，但似乎在一列中输出所有内容。

这是它目前的样子

目前的样子

这就是我想要实现的目标

我想要达到的目标

任何帮助将不胜感激，在此先感谢！

标签： htmlbootstrap-4

解决方案

这是你想要达到的目标吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script src="public/assets/js/tabulator.min.js"></script>
<script src="public/assets/js/table.js"></script>
<p></p>
<!-- Begin page -->
<div id="wrapper">
  <!--?php include 'layouts/navbar.php'; ?-->
  <div class="content-page">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <form action="" method="POST">
            <div class="card">
              <div class="card-title border-bottom">
                <h3 class="pl-2">Job Header Infomation</h3>
              </div>
              <div class="card-body">

                <div class="row">

                  <div class="col-sm-4">
                    <!-- Form Input -->
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text"
                          id="inputGroup-sizing-md">Description</span></div>
                      <input type="text" class="form-control" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm" />
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
                          Design</span></div>
                      <select class="form-control" id="form-door-design" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
                          Finish</span></div>
                      <select class="form-control" id="form-door-finish" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
                          Edge</span></div>
                      <select class="form-control" id="form-door-edge" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Board
                          Thickness</span></div>
                      <select class="form-control" id="form-door-board" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm"></select>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Door
                          Colour</span></div>
                      <input type="text" class="form-control" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm" />
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="input-group input-group-sm mb-3">
                      <div class="input-group-prepend"><span class="input-group-text"
                          id="inputGroup-sizing-md">Description</span>
                      </div>
                      <input type="text" class="form-control" aria-label="Small"
                        aria-describedby="inputGroup-sizing-sm" />
                    </div>
                  </div>
                  <div class="col-sm-4">
                      <div class="input-group input-group-sm mb-3">
                          <div class="input-group-prepend"><span class="input-group-text"
                              id="inputGroup-sizing-md">Something else</span>
                          </div>
                          <input type="text" class="form-control" aria-label="Small"
                            aria-describedby="inputGroup-sizing-sm" />
                        </div>
                  </div>
                </div>


              </div>
              <div class="card-footer">
                <button class="btn btn-primary w-md waves-effect waves-light" onclick="addRow()">Save</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
</div>
<!--<?php include 'layouts/footer.php'; ?>-->
<p></p>
<!--?php include 'layouts/footerScript.php'; ?-->


<script src="public/plugins/peity-chart/jquery.peity.min.js"></script>

推荐阅读