CSS框架：Bootstrap 4
jQuery，用于验证和输入蒙版的JS掩码
定制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标准冲突。
我试图修复它们并使其看起来很合理。
请与您的版本进行比较以了解更改。
最重要的是，我们尝试将一个container保留在HTML页面中并保留所有数据。
您的Navbar也无法正常工作。我没有修复它。我建议您在其示例部分中使用标准的hootstrap navbar。NAVBAR示例
.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>