文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >带3列的引导页表单输入(系统)

问带3列的引导页表单输入(系统)
EN

Stack Overflow用户
提问于 2021-02-16 01:23:51
回答 1查看 75关注 0票数 0

由于我在这个项目中使用了引导程序，所以我想知道是否可以(我想是这样)来管理form元素，使其有3列，因为现在HTML页面看起来很难看，因为彼此下面的所有后续输入字段都很难看。因此，广泛传播将使更多的功能和效率。

​

代码语言：javascript
复制
<head>
<meta charset="utf-8">
<title>Create Orders</title>
<link href="/common/buttons.css" rel="stylesheet" />
<link href="/order-download/css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/order-create/createOrder.css" rel="stylesheet" />

<script src="/order-create/createOrder.js" type="module"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
  <div id="main">
    <div id="content-container" class="container">
      <div id="delivery-address" class="content-page">
        <div>
          <form>                        
            <div class="form-group row">
                <label for="refNo" class="col-sm-2 col-form-label">Reference No<span class="required">*</span></label>
                <input id="buyer-refNo" type="text" class="col-sm-4 form-control" placeholder="Reference No">
                <label id="refNo-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>  

            <div class="form-group row">
                <label for="poNo" class="col-sm-2 col-form-label">Customer PO No<span class="required">*</span></label>
                <input id="buyer-poNo" type="text" class="col-sm-4 form-control" placeholder="PO No">
                <label id="poNo-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

             <div class="form-group row">
                <label for="companyname" class="col-sm-2 col-form-label">Company Name<span class="required">*</span></label>
                <input id="companyname" type="text" class="col-sm-4 form-control" placeholder="Company Name">
                <label id="companyname-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>                      

            <div class="form-group row">
                <label for="firstname" class="col-sm-2 col-form-label">First Name<span class="required">*</span></label>
                <input id="buyer-firstname" type="text" class="col-sm-4 form-control" placeholder="First Name">
                <label id="firstname-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="lastname" class="col-sm-2 col-form-label">Last Name</label>
                <input id="buyer-lastname" type="text" class="col-sm-4 form-control" placeholder="Last Name">
                <label id="lastname-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="addr1" class="col-sm-2 col-form-label">Address1<span class="required">*</span></label>
                <input id="buyer-address1" type="text" class="col-sm-4 form-control" placeholder="Address1">
                <label id="addr1-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="addr2" class="col-sm-2 col-form-label">Address2</label>
                <input id="buyer-address2" type="text" class="col-sm-4 form-control" placeholder="Address2">
                <!-- <label id="addr2-feedback" class="feedback col-sm-4 col-form-label hide"></label> -->
            </div>

            <div class="form-group row">
                <label for="suburb" class="col-sm-2 col-form-label">Suburb<span class="required">*</span></label>
                <input id="buyer-suburb" type="text" class="col-sm-4 form-control" placeholder="Suburb">
                <label id="suburb-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="state" class="col-sm-2 col-form-label">State<span class="required">*</span></label>
                <select id="buyer-state" class="col-sm-4 form-control" >
                  <option select="selected">-</option>
                  <option value="New South Wales">New South Wales</option>
                  <option value="Queensland">Queensland</option>
                  <option value="Victoria">Victoria</option>
                  <option value="South Australia">South Australia</option>
                  <option value="Tasmania">Tasmania</option>
                  <option value="Western Australia">Western Australia</option>
                  <option value="Australian Capital Territory">Australian Capital Territory</option>
                  <option value="Northern Territory">Northern Territory</option>
                </select>
                <label id="state-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="postcode" class="col-sm-2 col-form-label">Postcode<span class="required">*</span></label>
                <input id="buyer-postcode" type="text" class="col-sm-4 form-control" placeholder="Postcode">
                <label id="postcode-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="country" class="col-sm-2 col-form-label">Country<span class="required">*</span></label>
                <!-- <input id="country" type="text" class="col-sm-4 form-control" placeholder="Country"> -->
                <select id="buyer-country" class="col-sm-4 form-control" >
                  <option select="selected">-</option>
                  <option value="AU">AU</option>
                  <option value="UK">UK</option>
                  <option value="New Zealand">New Zealand</option>
                </select>
                <label id="country-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

             <div class="form-group row">
                <label for="phone" class="col-sm-2 col-form-label">Phone</label>
                <input id="buyer-phone" type="text" class="col-sm-4 form-control" placeholder="Phone">
                <label id="phone-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="email" class="col-sm-2 col-form-label">Email Address</label>
                <input id="buyer-email" type="text" class="col-sm-4 form-control" placeholder="Email Address">
                <label id="email-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>                     

            <div class="form-group row" >
                <label for="deliveryNote" class="col-sm-2 col-form-label">DeliveryNote</label>
                <input id="buyer-note" type="text" class="col-sm-4 form-control" placeholder="DeliveryNote">
            </div>

            <div class="form-group row">
                <label for="store" class="col-sm-2 col-form-label">Supplier Name<span class="required">*</span></label>
                <select id="buyer-store" class="col-sm-4 form-control"><option select="selected" >-</option></select>
                <label id="store-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>

            <div class="form-group row">
                <label for="date" class="col-sm-2 col-form-label">Created Date<span class="required">*</span></label>
                <input id="buyer-date" type="date" class="col-sm-4 form-control" placeholder="Created Date">
                <label id="date-feedback" class="feedback col-sm-4 col-form-label hide"></label>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

​

html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-16 01:55:54

为了使其正常工作，我将类row放在form元素上；将form-group元素上的所有row替换为col-md-4，这使得表单在平板屏幕上有三列，并且更大；最后，从标签和输入元素中删除所有col-类。

下面是您更新的代码。复制粘贴..。

代码语言：javascript
复制
<head>
<meta charset="utf-8">
<title>Create Orders</title>
<link href="/common/buttons.css" rel="stylesheet" />
<link href="/order-download/css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/order-create/createOrder.css" rel="stylesheet" />

<script src="/order-create/createOrder.js" type="module"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
  <div id="main">
    <div id="content-container" class="container">
      <div id="delivery-address" class="content-page">
        <div>
          <form class="row">
          
            <div class="form-group col-md-4">
                <label for="refNo" class="col-form-label">Reference No<span class="required">*</span></label>
                <input id="buyer-refNo" type="text" class="form-control" placeholder="Reference No">
                <label id="refNo-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="poNo" class="col-form-label">Customer PO No<span class="required">*</span></label>
                <input id="buyer-poNo" type="text" class="form-control" placeholder="PO No">
                <label id="poNo-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="companyname" class="col-form-label">Company Name<span class="required">*</span></label>
                <input id="companyname" type="text" class="form-control" placeholder="Company Name">
                <label id="companyname-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="firstname" class="col-form-label">First Name<span class="required">*</span></label>
                <input id="buyer-firstname" type="text" class="form-control" placeholder="First Name">
                <label id="firstname-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="lastname" class="col-form-label">Last Name</label>
                <input id="buyer-lastname" type="text" class="form-control" placeholder="Last Name">
                <label id="lastname-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="addr1" class="col-form-label">Address1<span class="required">*</span></label>
                <input id="buyer-address1" type="text" class="form-control" placeholder="Address1">
                <label id="addr1-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="addr2" class="col-form-label">Address2</label>
                <input id="buyer-address2" type="text" class="form-control" placeholder="Address2">
                <!-- <label id="addr2-feedback" class="feedback col-form-label hide"></label> -->
            </div>

            <div class="form-group col-md-4">
                <label for="suburb" class="col-form-label">Suburb<span class="required">*</span></label>
                <input id="buyer-suburb" type="text" class="form-control" placeholder="Suburb">
                <label id="suburb-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="state" class="col-form-label">State<span class="required">*</span></label>
                <select id="buyer-state" class="form-control" >
                  <option select="selected">-</option>
                  <option value="New South Wales">New South Wales</option>
                  <option value="Queensland">Queensland</option>
                  <option value="Victoria">Victoria</option>
                  <option value="South Australia">South Australia</option>
                  <option value="Tasmania">Tasmania</option>
                  <option value="Western Australia">Western Australia</option>
                  <option value="Australian Capital Territory">Australian Capital Territory</option>
                  <option value="Northern Territory">Northern Territory</option>
                </select>
                <label id="state-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="postcode" class="col-form-label">Postcode<span class="required">*</span></label>
                <input id="buyer-postcode" type="text" class="form-control" placeholder="Postcode">
                <label id="postcode-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="country" class="col-form-label">Country<span class="required">*</span></label>
                <!-- <input id="country" type="text" class="form-control" placeholder="Country"> -->
                <select id="buyer-country" class="form-control" >
                  <option select="selected">-</option>
                  <option value="AU">AU</option>
                  <option value="UK">UK</option>
                  <option value="New Zealand">New Zealand</option>
                </select>
                <label id="country-feedback" class="feedback col-form-label hide"></label>
            </div>

             <div class="form-group col-md-4">
                <label for="phone" class="col-form-label">Phone</label>
                <input id="buyer-phone" type="text" class="form-control" placeholder="Phone">
                <label id="phone-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="email" class="col-form-label">Email Address</label>
                <input id="buyer-email" type="text" class="form-control" placeholder="Email Address">
                <label id="email-feedback" class="feedback col-form-label hide"></label>
            </div>                     

            <div class="form-group col-md-4" >
                <label for="deliveryNote" class="col-form-label">DeliveryNote</label>
                <input id="buyer-note" type="text" class="form-control" placeholder="DeliveryNote">
            </div>

            <div class="form-group col-md-4">
                <label for="store" class="col-form-label">Supplier Name<span class="required">*</span></label>
                <select id="buyer-store" class="form-control"><option select="selected" >-</option></select>
                <label id="store-feedback" class="feedback col-form-label hide"></label>
            </div>

            <div class="form-group col-md-4">
                <label for="date" class="col-form-label">Created Date<span class="required">*</span></label>
                <input id="buyer-date" type="date" class="form-control" placeholder="Created Date">
                <label id="date-feedback" class="feedback col-form-label hide"></label>
            </div>
            
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

UPDATE:如果希望将标签/输入保持为并排，则需要所谓的“嵌套列”。为此，复制并粘贴以下内容..。

代码语言：javascript
复制
<head>
<meta charset="utf-8">
<title>Create Orders</title>
<link href="/common/buttons.css" rel="stylesheet" />
<link href="/order-download/css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/order-create/createOrder.css" rel="stylesheet" />

<script src="/order-create/createOrder.js" type="module"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
  <div id="main">
    <div id="content-container" class="container">
      <div id="delivery-address" class="content-page">
        <div>
          <form class="row">
          
            <div class="form-group col-md-4">
                <div class="row">
                    <label for="refNo" class="col-form-label col-md-6">Reference No<span class="required">*</span></label>
                    <input id="buyer-refNo" type="text" class="form-control col-md-6" placeholder="Reference No">
                    <label id="refNo-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="poNo" class="col-form-label col-md-6">Customer PO No<span class="required">*</span></label>
                    <input id="buyer-poNo" type="text" class="form-control col-md-6" placeholder="PO No">
                    <label id="poNo-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="companyname" class="col-form-label col-md-6">Company Name<span class="required">*</span></label>
                    <input id="companyname" type="text" class="form-control col-md-6" placeholder="Company Name">
                    <label id="companyname-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="firstname" class="col-form-label col-md-6">First Name<span class="required">*</span></label>
                    <input id="buyer-firstname" type="text" class="form-control col-md-6" placeholder="First Name">
                    <label id="firstname-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="lastname" class="col-form-label col-md-6">Last Name</label>
                    <input id="buyer-lastname" type="text" class="form-control col-md-6" placeholder="Last Name">
                    <label id="lastname-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="addr1" class="col-form-label col-md-6">Address1<span class="required">*</span></label>
                    <input id="buyer-address1" type="text" class="form-control col-md-6" placeholder="Address1">
                    <label id="addr1-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="addr2" class="col-form-label col-md-6">Address2</label>
                    <input id="buyer-address2" type="text" class="form-control col-md-6" placeholder="Address2">
                    <!-- <label id="addr2-feedback" class="feedback col-form-label col-md-6 hide"></label> -->
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="suburb" class="col-form-label col-md-6">Suburb<span class="required">*</span></label>
                    <input id="buyer-suburb" type="text" class="form-control col-md-6" placeholder="Suburb">
                    <label id="suburb-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="state" class="col-form-label col-md-6">State<span class="required">*</span></label>
                    <select id="buyer-state" class="form-control col-md-6" >
                      <option select="selected">-</option>
                      <option value="New South Wales">New South Wales</option>
                      <option value="Queensland">Queensland</option>
                      <option value="Victoria">Victoria</option>
                      <option value="South Australia">South Australia</option>
                      <option value="Tasmania">Tasmania</option>
                      <option value="Western Australia">Western Australia</option>
                      <option value="Australian Capital Territory">Australian Capital Territory</option>
                      <option value="Northern Territory">Northern Territory</option>
                    </select>
                    <label id="state-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="postcode" class="col-form-label col-md-6">Postcode<span class="required">*</span></label>
                    <input id="buyer-postcode" type="text" class="form-control col-md-6" placeholder="Postcode">
                    <label id="postcode-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="country" class="col-form-label col-md-6">Country<span class="required">*</span></label>
                    <!-- <input id="country" type="text" class="form-control col-md-6" placeholder="Country"> -->
                    <select id="buyer-country" class="form-control col-md-6" >
                      <option select="selected">-</option>
                      <option value="AU">AU</option>
                      <option value="UK">UK</option>
                      <option value="New Zealand">New Zealand</option>
                    </select>
                    <label id="country-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

             <div class="form-group col-md-4">
                <div class="row">
                    <label for="phone" class="col-form-label col-md-6">Phone</label>
                    <input id="buyer-phone" type="text" class="form-control col-md-6" placeholder="Phone">
                    <label id="phone-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="email" class="col-form-label col-md-6">Email Address</label>
                    <input id="buyer-email" type="text" class="form-control col-md-6" placeholder="Email Address">
                    <label id="email-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>                     

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="deliveryNote" class="col-form-label col-md-6">DeliveryNote</label>
                    <input id="buyer-note" type="text" class="form-control col-md-6" placeholder="DeliveryNote">
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="store" class="col-form-label col-md-6">Supplier Name<span class="required">*</span></label>
                    <select id="buyer-store" class="form-control col-md-6"><option select="selected" >-</option></select>
                    <label id="store-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>

            <div class="form-group col-md-4">
                <div class="row">
                    <label for="date" class="col-form-label col-md-6">Created Date<span class="required">*</span></label>
                    <input id="buyer-date" type="date" class="form-control col-md-6" placeholder="Created Date">
                    <label id="date-feedback" class="feedback col-form-label col-md-6 hide"></label>
                </div>
            </div>
            
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66217561

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档