搜索
搜索

如何固定class =“ form-row”以及如何将标签和文本框放在一条直线上？

CHILUKA BHARATH 发表于 Dev
8
奇卢卡·巴拉

我有一个包含以下字段的简单引导程序表格，现在的问题是

  1. 标签和文本框不是直线。
  2. 当我更改Notes字段大小时，它将影响其余字段，它们正在向下移动（请参见屏幕快照第2点），如何使这些字段固定，以及如何使标签和文本直线

屏幕截图

**以下是可运行的代码，请在下面进行编辑以帮助我（打开摘要页面）。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
      });
    });
  </script>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
    }
.mydiv
{
   
  border-style: solid;
  border-width: thin;
  width:100%;
  height:700px;
}

</style>
</head>
<body>




<div class="mydiv">

<div class="container">

              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">FirstName</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="FirstName">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label class="col-sm-2">StartDate</label>
                     <div class="col-sm-7" >
                         <div class="form-group">
                         <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                      </div>
                    </div>
                     </div>
                </div>
              </div>
              
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">LastName</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="LastName">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label class="col-sm-2">EndDate</label>
                     <div class="col-sm-7" >
                         <div class="form-group">
                         <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                      </div>
                    </div>
                     </div>
                </div>
              </div>
              
                                  
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test1:</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test1">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test2:</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test2">
                     </div>
                </div>
              </div>
                          
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test3</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test3">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test4 Id</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="">
                     </div>
                </div>
              </div>
              
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test5</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">Notes</label>
                     <div class="col-sm-7">
                      <textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
                     </div>
                </div>
              </div>
              <div style='clear:both'></div>              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test6</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test6">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test7</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test7">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test8</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test8">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              

              
</div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

</body>
</html>

码。**

约翰

通过将此代码添加到CSS中，让我知道该代码是否对您有用：

.form-group{
          display:flex;
          align-items:center;
        } 
 
 
@media (min-width: 992px) {
  
#w3review {
  position: absolute;
}        
}

工作示例：

.form-group{
          display:flex;
          align-items:center;
        } 
 
 
@media (min-width: 992px) {
  
#w3review {
  position: absolute;
}        
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
      });
    });
  </script>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
    }
.mydiv
{
   
  border-style: solid;
  border-width: thin;
  width:100%;
  height:700px;
}

</style>
</head>
<body>




<div class="mydiv">

<div class="container">

              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">FirstName</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="FirstName">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label class="col-sm-2">StartDate</label>
                     <div class="col-sm-7" >
                         <div class="form-group">
                         <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                      </div>
                    </div>
                     </div>
                </div>
              </div>
              
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">LastName</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="LastName">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label class="col-sm-2">EndDate</label>
                     <div class="col-sm-7" >
                         <div class="form-group">
                         <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                      </div>
                    </div>
                     </div>
                </div>
              </div>
              
                                  
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test1:</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test1">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test2:</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test2">
                     </div>
                </div>
              </div>
                          
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test3</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test3">
                     </div>
                </div>
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test4 Id</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="">
                     </div>
                </div>
              </div>
              
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test5</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="">
                     </div>
                </div>
                
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">Notes</label>
                     <div class="col-sm-7">
                      <textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
                     </div>
                </div>
              </div>
              <div style='clear:both'></div>              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test6</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test6">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test7</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test7">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              <div class="form-row">
                <div class="form-group col-md-6">
                      <label  class="col-sm-2">test8</label>
                     <div class="col-sm-7">
                      <input type="email" class="form-control" placeholder="test8">
                     </div>
                </div>
                
              </div>
              <div style='clear:both'></div>
              
              

              
</div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Ms word中将文本框对齐成一条直线？

如何将多个 protobuf 放在一条线上

如何从多条直线上画一条曲线？

Windows Form 如何将命令结果输出到文本框

如何将文本框放在图像旁边

如何将分号放在富文本框中的同一行上？

如何将文本从一个文本框复制到标签

如何使用上面的图像和文本创建一条垂直线，并通过多个<li>

如何更改文本框（dijit / form / TextBox）焦点颜色

如何计算一条直线上与给定点等距的两个点？

如何验证选择class =“ form-control”

如何将文本框放在表数据中，哪些行已从另一表追加/移动？

Python：Kivy：如何对齐标签本身和文本框？

在VB.NET中单击按钮时，如何将数据从Form2发送到Form1到Form1文本框中？

如何将按钮和文本放在同一行？

如何将图像和文本放在 GitHub README.md 中的同一行？

如何将图标和文本段落放在一行中？

如何将图标和文本放在同一行

如何将滚动条添加到富文本框 wpf

如何将滚动条附加到 tkinter 上的文本框？

您如何将文本框或Winforms中的标签中的文本另存为图像？

如何将 form_select 添加到 rails 应用程序中的某些固定下拉列表

如何让css在同一行中并排排列标签，文本框和文本区域

将线放在一条直线上并计算空虚

如何为Spring <form：textarea />设置固定宽度和“ custom-resizeable”长度？

如何判断一条直线是在另一条直线前面还是后面？

如何使这两个组件出现在同一行？（文本框标签和文本框）

如何使用JQuery Validation验证Spring form：form的form：password？

如何将值从文本框传递到具有不同形式的标签

TOP 榜单

  1. 1

    隐藏发件人没有短信PHP

  2. 2

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  3. 3

    在浏览器中请求URL时会发生什么？

  4. 4

    flask-admin 如何自定义删除按钮

  5. 5

    材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

  6. 6

    用日期数据透视表和日期顺序查询

  7. 7

    Jqgrid：多级别组摘要

  8. 8

    java io ioexception无法解析服务器地址解析器的响应

  9. 9

    Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象

  10. 10

    sshd AllowGroups组未授予访问权限

  11. 11

    jQuery无限滚动固定div中的滚动

  12. 12

    android 背部按下

  13. 13

    Flexbox CSS 对齐属性环境惰性？

  14. 14

    为什么随机森林中的平均降低基尼系数取决于人口规模？

  15. 15

    ClickHouse 创建临时表

  16. 16

    为什么PlusShare.Builder setRecipients方法不起作用？

  17. 17

    如何在Android中识别MICR代码

  18. 18

    PyQt4.QtCore模块无法向sip模块注册

  19. 19

    正则表达式，用于查找所有以任何字母开头和数字开头的文件

  20. 20

    是否可以通过编程方式对很多动画进行重新着色？

  21. 21

    机器密钥生成

热门标签

归档