Question

简介嗨，我正在使用搜索表单，有5个输入和一个搜索按钮。每个输入字段都有其标签。

代码

<section class="content">
        <div class="box box-info">
            <form action="/users" id="Search-form" method="POST" role="form">
                <div class="box-body">
                    <div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
                        <div class="form-group frm-setp">
                            <label for="pwd">Name:</label>
                            <input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
                        </div>
                        <div class="form-group frm-setp">
                            <label for="pwd">Ph#:</label>
                            <input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
                        </div>
                        <div class="form-group frm-setp">
                            <label for="email">From:</label>
                            <input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
                                   value="$data.from" />
                        </div>
                        <div class="form-group frm-setp">
                            <label for="pwd">To:</label>
                            <input type="text" class="form-control pickdate" name="todate" id="todate"
                                   value="$data.to" />
                        </div>
                        <div class="form-group frm-setp">
                            <label for="pwd">Filter</label>
                            <select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
                                <option value="all">All</option>
                                <option value="driver">Active Drivers</option>
                            </select>
                        </div>
                        <div class="form-group frm-setp">
                            <button type="submit" class="btn btn-info">Search</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

显示LG 显示MD

问题在这里，显然我对中等屏幕或更少的屏幕有问题但是对于更大的屏幕效果更好。在中型或小型屏幕上，其他元素会突破界限。

如果有人对此类问题或任何参考有所了解，请提供帮助。谢谢你的时间。

Answer 1

以这种方式执行 - 所有输入必须包含在响应式网格列类中。

工作示例

@media(max-width:767px){
#srch {
margin-top: 22px;
margin-left: 10px;
}
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
         <style type="text/css">
         </style>
         </head>
         <body>
          <section class="content">
      <div class="box box-info">
          <form action="/users" id="Search-form" method="POST" role="form">
              <div class="box-body">
                  <div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
                      <div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
                          <label for="pwd">Name:</label>
                          <input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
                      </div>
                      <div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
                          <label for="pwd">Ph#:</label>
                          <input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
                      </div>
                      <div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
                          <label for="email">From:</label>
                          <input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
                                 value="$data.from" />
                      </div>
                      <div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
                          <label for="pwd">To:</label>
                          <input type="text" class="form-control pickdate" name="todate" id="todate"
                                 value="$data.to" />
                      </div>
                      <div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
                          <label for="pwd">Filter</label>
                          <select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
                              <option value="all">All</option>
                              <option value="driver">Active Drivers</option>
                          </select>
                      </div>
                      <div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
                          <button id="srch" type="submit" class="btn btn-info">Search</button>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </section>
</body>
</html>

Answer 2

对所有输入和标签使用setObject1() { this.Service.getObject1().then(data => { console.log(data); if(data){ this.Object1 = data.Data; this.setObject2(); } }); } setObject2() { this.Service2.getObject2(this.Object1.HRRef).then(sdata => { console.log(sdata); if(sdata) { this.Object2 = sdata[0]; } }); }课程。

col-*-*

如何使内联表单元素响应

2 个答案: