jquery - Bootstrap 4 响应能力无法正常工作

标签 jquery html css bootstrap-4

CSS 框架:Bootstrap 4

JQUERY，用于验证和输入屏蔽的 JS MASK

用于着色和边距/填充/字体大小的自定义 CSS

适用于:台式机/笔记本电脑屏幕\

在以下设备上效果不佳:手机/平板电脑/超大屏幕

我正在为我的库存软件 fireworkstech.com 设计一个产品添加屏幕，确切的问题是我无法让它响应更小和更大的屏幕。元素扭曲，看起来根本没有任何作用。

请帮助解决这个问题或发现我的错误导致问题。问题是嵌入了 HTML/CSS。

提前致谢

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}

.product_new {
  margin-left: 115px;
}

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  width: 800px;
  margin-left: 115px;
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}

.general_info {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.info_general {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-right: 8px;
}

.info {
  margin-left: 40px;
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.weight_inventory {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-left: 4px;
}

.discription_inventory {
  border-top: 1px slategrey;
  border-left: 1px slategrey;
  border-right: 1px slategrey;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="file.css">
  <title>Assignment</title>

</head>

<body>
  <div>
    <nav class="top_navigation">
      <li class="nav-item d-inline-flex">
        <a class="nav-link  h4 text-light" href="#">Inventery</a>.
      </li>
      <li class="nav-item d-inline-flex">
        <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
        <a class="nav-link text-light" href="#">Operation</a>
        <a class="nav-link text-light" href="#">Data</a>
        <a class="nav-link text-light" href="#">Reporting</a>
        <a class="nav-link text-light" href="#">Configration</a>
      </li>
    </nav>
  </div>
  <div class="container p-2">
    <a class="h6 mt-3 ">Product/New</a>
    <div class="button">
      <button type="button" class="btn btn-primary button_color">Save</button>
      <button type="button" class="btn btn-light">Discard</button>
    </div>
  </div>

  <div class="ml-3 mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="container mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>

    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input type="Product-Name" class="form-control" type="text" placeholder="Product Name">

      </div>
    </div>
  </div>
  <div class="container">
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
    </div>
  </div>
  <div class="container mt-4 p-2">
    <ul class="nav nav-tabs li_data_new_pages">
      <li><a data-toggle="tab" href="#information">General Information</a></li>
      <li><a data-toggle="tab" href="#sales">Sales</a></li>
      <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
    </ul>

    <div class="tab-content">
      <div id="information" class="container tab-pane active">
        <h3>General Information</h3>
        <a>
          <div>
            <div>
              <form class="form-inline general ">
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="sell">Product<br>Type</label>
                  <select class="form-control general_info" id="sell">
                    <option>consumable</option>
                    <option>service</option>
                    <option>storeable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Sale Prices</label>
                  <input class="form-control decimal general_info" id="information" type="text" placeholder="1.00">
                  </input>
                </div>

              </form>
            </div>
            <div class="align-left">
              <form class="form-inline">
                <div class="input-group mt-1 w-50 font-weight-bold">
                  <label for="sell">Product<br>Category</label>
                  <select class="form-control info_general" id="sell">
                    <option>All</option>
                    <option>Expenses</option>
                    <option>Saleable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Cost</label>
                  <input class="form-control decimal info" id="information" placeholder="0.00" data-inputmask="'mask':'9999999'">
                  </input>
                </div>
              </form>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Internal<br>refrence</label>
              <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">
              </input>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Barcode</label>
              <input class="form-control general_info" id="information">
              </input>
            </div>
            <div class="container">
              <form action="/action_page.php">
                <div class="form-group font-weight-bold">
                  <label for="comment">For Internal Notes</label>
                  <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
                </div>
              </form>
            </div>
          </div>
        </a>
      </div>
      <div id="sales" class="tab-pane fade">
        <h3>Sales</h3>
        <p>.......</p>
      </div>

      <div id="inventory" class="tab-pane fade">
        <form class="form-inline">
          <p class="h2 col-9">Operation</p>
          <div>
            <p class="h2 col-3">Logistics</p>
          </div>
          <div class="form-inline col-6">
            <strong>Route</strong>
            <div class="form-check">
              <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
            </div>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="inventory">Weight</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">
            </input>

            <label for="inventory" style="margin-left:6px">Volume</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i></input>
          </div>
        </form>
        <div>
          <div class="input-group w-25">
            <label for="inventory"><strong>Custom Lead Time</strong></label>
            <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days</input>
          </div>

        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Orders</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
            </div>
          </form>
        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Receipts</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script>
      $(document).ready(function decimal() {
        $(".decimal").inputmask('decimal', {
          rightAlign: true
        });
      });
    </script>
    <script>
      $(":input").inputmask();
    </script>

</body>

</html>

最佳答案

您的 HTML 设计中存在许多与 Bootstrap 标准冲突的核心问题。

我已尝试修复它们并通过最少的更改使其看起来合理。

请将我的版本与您的版本进行比较以了解更改。

最重要的是我们尽量在 HTML 页面中只保留一个 container 并将所有数据保存在其中。

此外，您的导航栏无法正常工作。我还没有修好它。我建议您使用其示例部分中的标准引导导航栏。 Navbar examples 

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}


/* 
.product_new {
  margin-left: 115px;
}
 */

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  /* width: 800px;
  margin-left: 115px; */
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div>
  <nav class="top_navigation">
    <li class="nav-item d-inline-flex">
      <a class="nav-link  h4 text-light" href="#">Inventery</a>.
    </li>
    <li class="nav-item d-inline-flex">
      <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
      <a class="nav-link text-light" href="#">Operation</a>
      <a class="nav-link text-light" href="#">Data</a>
      <a class="nav-link text-light" href="#">Reporting</a>
      <a class="nav-link text-light" href="#">Configration</a>
    </li>
  </nav>
</div>
<div class="container p-2">
  <a class="h6 mt-3 ">Product/New</a>
  <div class="button">
    <button type="button" class="btn btn-primary button_color">Save</button>
    <button type="button" class="btn btn-light">Discard</button>
  </div>
  <div class="mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>
    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input id="Product-Name" class="form-control" type="text" placeholder="Product Name">
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
  </div>
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
  </div>
</div>
<div class="container mt-4 p-2">
  <ul class="nav nav-tabs li_data_new_pages">
    <li><a data-toggle="tab" href="#information">General Information</a></li>
    <li><a data-toggle="tab" href="#sales">Sales</a></li>
    <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
  </ul>

  <div class="tab-content">
    <div id="information" class="container tab-pane active">
      <h3>General Information</h3>
      <a>
        <div>
          <div>
            <form class="form-inline general ">
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="sell">Product<br>Type</label>
                <select class="form-control general_info" id="sell">
                  <option>consumable</option>
                  <option>service</option>
                  <option>storeable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Sale Prices</label>
                <input class="form-control decimal general_info" id="information1" type="text" placeholder="1.00">
              </div>
            </form>
          </div>
          <div class="align-left">
            <form class="form-inline">
              <div class="input-group mt-1 w-50 font-weight-bold">
                <label for="sell">Product<br>Category</label>
                <select class="form-control info_general" id="sell1">
                  <option>All</option>
                  <option>Expenses</option>
                  <option>Saleable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Cost</label>
                <input class="form-control decimal info" id="information2" placeholder="0.00" data-inputmask="'mask':'9999999'">

              </div>
            </form>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Internal<br>refrence</label>
            <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">

          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Barcode</label>
            <input class="form-control general_info" id="information">
          </div>
          <div class="container">
            <form action="/action_page.php">
              <div class="form-group font-weight-bold">
                <label for="comment">For Internal Notes</label>
                <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
              </div>
            </form>
          </div>
        </div>
      </a>
    </div>
    <div id="sales" class="tab-pane fade">
      <h3>Sales</h3>
      <p>.......</p>
    </div>

    <div id="inventory" class="tab-pane fade">
      <form class="form-inline">
        <p class="h2 col-9">Operation</p>
        <div>
          <p class="h2 col-3">Logistics</p>
        </div>
        <div class="form-inline col-6">
          <strong>Route</strong>
          <div class="form-check">
            <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
          </div>
        </div>
        <div class="input-group mt-2 w-50 p-2 font-weight-bold">
          <label for="inventory">Weight</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">


          <label for="inventory" style="margin-left:6px">Volume</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i>
        </div>
      </form>
      <div>
        <div class="input-group w-25">
          <label for="inventory"><strong>Custom Lead Time</strong></label>
          <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days
        </div>

      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Orders</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
          </div>
        </form>
      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Receipts</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
  <script>
    $(document).ready(function decimal() {
      $(".decimal").inputmask('decimal', {
        rightAlign: true
      });
    });
  </script>
  <script>
    $(":input").inputmask();
  </script>

关于jquery - Bootstrap 4 响应能力无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56748593/

上一篇：javascript - 在 Chart.js 中将标签颜色更改为特定值

下一篇：javascript - 如何在html中的上传按钮旁边打印输入文件的名称

相关文章：

javascript - 使用 jQuery 读取 JSON 并通过 ID 匹配字段

javascript - 图例仅在强制刷新 page-chartjs 时显示

javascript - 如何在 Angular .js 中显示下拉菜单(已应用选择它而不显示)

css - nth-of-type 在 IE 9 中不起作用

javascript - 在 Javascript 中强制 dom 重新加载/调整大小

jquery - 如何在 CSS 或 jquery 中的三 Angular 形图像上制作剪贴蒙版？

html - 让 Affix 为导航和导航栏工作

Javascript:暂停/取消暂停 javascript 俄罗斯方 block 游戏

javascript - 滚动时 div 内的内容淡入淡出

javascript - swiper 插件延迟加载大约 30 到 60 秒

©2024 IT工具网  联系我们