Javascript 如何使内联块适合整个宽度？
我不想让内联块填充整个宽度。实际上我用的是放大器。我想让所有的字段都适合整个宽度。但是我不能去。我可以用它来做！重要的。但这是一种糟糕的做法。所以，我怎么能不使用它呢！重要吗？我使用的是以下代码：Javascript 如何使内联块适合整个宽度？,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我不想让内联块填充整个宽度。实际上我用的是放大器。我想让所有的字段都适合整个宽度。但是我不能去。我可以用它来做！重要的。但这是一种糟糕的做法。所以，我怎么能不使用它呢！重要吗？我使用的是以下代码： <!DOCTYPE html> <html> <head> <title>Test</title> <script async custom-element="amp-autocomplete" sr
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script async custom-element="amp-autocomplete" src="https://www.cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async src="https://www.cdn.ampproject.org/v0.js"></script>
<style>
.page-form {
background: url(https://mydoginsurance.com.au/images/form-bg-lg.webp) no-repeat center;
background-size: cover;
position: relative;
color: #fff;
}
.section {
padding: 63px 0;
}
.page-form .container {
position: relative;
z-index: 100;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-center{
text-align: center;
}
.mb-5, .my-5 {
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.page-form .container .form-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-box {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #eaeaea;
-webkit-box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
padding: 40px;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.form-box .mb-4 {
position: relative;
}
.form-box .form-control {
padding: 20px 0 0 18px;
height: 54px;
border: none;
border-radius: 2px;
color: #000;
}
.form-control, input[type=text], input[type=email], input[type=tel], input[type=file], input[type=search], textarea, select {
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="page-form section" id="getquote">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-5 text-center">
<h2>Submit your Dog info and we'll address your request ASAP</h2>
</div>
<div class="form-box">
<form action="https://mydoginsurance.com.au/choose-plan.html" method="GET" target="_top">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="mb-4">
<input type="text" name="dog_name" class="form-control" aria-labelledby="label_dog_name" required>
<label id="label_dog_name" for="dog_name">Name of Dog</label>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<amp-autocomplete filter="substring" min-characters="0" style="padding: 0; color: black; display: cover">
<input type="search" name="breed" class="form-control" id="tbdog" aria-labelledby="label_dog_breed" required>
<label id="label_dog_breed" for="breed">Breed of Dog</label>
<script type="application/json">
{ "items": [ "Affenpinscher", "Afghan Hound", "Airedale Terrier", "Akita" }
</script>
</amp-autocomplete>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<!--<input type="number" name="age" min="1" max="8" class="form-control" required>-->
<select name="age" class="form-control" aria-labelledby="label_dog_age" required>
<option></option>
<option value="0">
< 1 </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="label_dog_age" for="age">Age of Dog</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
试验
.网页表格{
背景：url(https://mydoginsurance.com.au/images/form-bg-lg.webp)无重复中心；
背景尺寸：封面；
位置：相对位置；
颜色：#fff；
}
.科{
填充：63px0；
}
.页面表单.容器{
位置：相对位置；
z指数：100；
}
.container、.container fluid、.container sm、.container md、.container lg、.container xl{
宽度：100%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
.验证资源中心的合理性{
-ms-flex-pack:center；
证明内容：中心；
}
.行{
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
右边距：-15px；
左边距：-15px；
}
.col-1、.col-2、.col-3、.col-4、.col-5、.col-6、.col-7、.col-8、.col-9、.col-10、.col-11、.col、.col-12、.col、.col、.col、.col-sm-1、.col-sm-2、.col-sm-3、.col-sm-4、.col-sm-5、.col-sm-6、.col-7、.col-sm-8、.col、.col-9、.col、.col、.col、.col、.col-sm、.col-10、.col-10、.col、.col、.col、.col、.col、.col-sm，.col-md-8、.col-md-9、.col-md-10、.col-md-11、.col-md-12、.col-md、.col-lg-1、.col-lg-2、.col-lg-3、.col-lg-4、.col-lg-5、.col-lg-6、.col-lg-9、.col-lg-10、.col-lg-11、.col-lg-12、.col-lg、.col-lg、.col-xl-1、.col-xl-2、.col-xl-3、.col-4、.col-lg-6、.col-xl、.col-xl、，.col-xl-11、.col-xl-12、.col-xl、.col-xl-auto{
位置：相对位置；
宽度：100%；
右侧填充：15px；
左侧填充：15px；
}
.文本中心{
文本对齐：居中；
}
.mb-5、.my-5{
边缘底部：3rem；
}
h2，.h2{
字体大小：2.5rem；
}
.页面表单.容器.表单框{
填充：0；
边界：无；
背景：无；
盒影：无；
-webkit盒阴影：无；
}
.表格箱{
背景：rgba（255，255，255，0.25）；
边框：1px实心#eaeaea；
-webkit盒阴影：013px29px0RGB（0/35%）；
盒影：013px29px0rgb（0/35%）；
填充：40px；
}
.验证资源中心的合理性{
-ms-flex-pack:center；
证明内容：中心；
}
.表格框.mb-4{
位置：相对位置；
}
.form box.form控件{
填充：20px 0 18px；
高度：54px；
边界：无；
边界半径：2px；
颜色：#000；
}
.form控件，输入[type=text]，输入[type=email]，输入[type=tel]，输入[type=file]，输入[type=search]，文本区域，选择{
显示：块；
宽度：100%；
填充：0.6雷姆0.75雷姆；
字号：1rem；
字体大小：400；
线高：1.5；
颜色：#495057；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心#ced4da；
边界半径：0rem；
过渡：边框颜色0.15s缓进缓出，框阴影0.15s缓进缓出；
}
[type=“search”]{
轮廓偏移：-2px；
-webkit外观：无；
}
提交您的狗信息，我们将尽快解决您的请求
狗名
您可以向其添加宽度：100%（放大器自动完成组件）