Home / Questions / 24453
Accepted
ganedugo
Asked: 2020-09-21 07:58:52 +0800 CST 2020-09-21 07:58:52 +0800 CST

棘手的引导表单！- 减少空间

  • 772

在此处输入图像描述在此处输入图像描述

我是网页设计的新手，在网上搜索我发现了引导框架，它对我来说似乎超级棒......但我试图设计一个像图像中的表单，但我找不到这样做的方法。

在这个论坛的一些人的帮助下，我能够将两个文本框与 Bootstrap 对齐，但我无法让它们更加统一以使表格更加统一，如何实现？

患者条目 识别类型 识别号 名字 中间名第一姓 第二姓 性别 男 女 出生日期 婚姻状况单身 已婚 职业 地址 座机 电话手机邮箱城市部门制度 附属贡献者类型 额外受益人 EPS排名 1 2 3 不适用 提交发送发送 
</div>

无标题文档 

<body>
    <div class="container">
        <br>
        <br>
        <br>
        <div class="panel panel-primary">
            <div class="panel-heading">Ingreso de Pacientes</div>
            <div class="panel-body">
                <form id="form" class="form-horizontal "role="form">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label" name="nombre">Primer Nombre</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control"  name="text_nom1" id="text_nom1" required/>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Nombre</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_nom2" id="text_nom2">
                            </div>
                        </div>
                    </div>
                    <div class="row">  
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Primer Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape1" id="text_ape1">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape2" id="text_ape2">
                            </div>
                        </div>
                    </div> 
                    <div class="row"> 
                        <div class="form-group form-inline col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Ciudad</label>
                            <div class="col-lg-2">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Departamento</label>
                            <div class="col-lg-5">
                                <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                            </div>
                        </div>
                    </div>
                                            <div class="row">
                        <div class="col-sm-offset-5 col-sm-2 text-center">
                            <div class="btn-group" data-toggle="buttons">
                                <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

bootstrap

3 Answers

  1. Best Answer

    您需要了解列是如何工作的，它们是如何嵌套的，以及它们是如何根据浏览器的宽度被赋予不同的尺寸的。

    你快要得到它了！

    在每一列中，您可以组合大小col-xs-1/12、和以实现所需的结构。col-sm-1/12col-md-1/12col-lg-1/12

    在这种特殊情况下，无需深入修改css原始的bootstrap来调整元素之间的分隔，您将需要这样的东西：

    <div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">Ingreso de Pacientes</div>
        <div class="panel-body">
            <form id="form" class="form-horizontal" role="form">

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label" name="nombre">Primer Nombre</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_nom1" id="text_nom1" required/>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Nombre</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_nom2" id="text_nom2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Primer Apellido</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_ape1" id="text_ape1">
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Apellido</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_ape2" id="text_ape2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Ciudad</label>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-xs-4 col-sm-3 col-md-4 col-lg-4">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                                <div class="col-xs-8 col-sm-9 col-md-8 col-lg-8">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Departamento</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-offset-5 col-sm-2 text-center">
                        <div class="btn-group" data-toggle="buttons">
                            <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

    但默认情况下，bootstrap它会将标签label与右边距对齐。

    用一条线css并指示id表单的自定义（以便它不会影响其他表单）它被解决了。

    #form label { text-align : left; }
    • 3

  2. 我建议您查看http://bootsnipp.com/forms，它可以帮助您使用 生成HTML必要的表单drag and drop，controles基于此网站，我们有以下（垂直）：

    <form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom1">Primer nombre</label>  
  <div class="col-md-4">
  <input id="text_nom1" name="text_nom1" placeholder="Primer nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom2">Segundo nombre</label>  
  <div class="col-md-4">
  <input id="text_nom2" name="text_nom2" placeholder="Segundo nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape1">Primer apellido</label>  
  <div class="col-md-4">
  <input id="text_ape1" name="text_ape1" placeholder="Primer apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape2">Segundo apellido</label>  
  <div class="col-md-4">
  <input id="text_ape2" name="text_ape2" placeholder="Segundo apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_nom">Ciudad nombre</label>  
  <div class="col-md-4">
  <input id="text_ciu_nom" name="text_ciu_nom" placeholder="Ciudad nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_dep">Departamento</label>  
  <div class="col-md-4">
  <input id="text_dep" name="text_dep" placeholder="Departamento" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_cod">Ciudad Código</label>  
  <div class="col-md-4">
  <input id="text_ciu_cod" name="text_ciu_cod" placeholder="Ciudad Código" class="form-control input-md" type="text">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="btn_enviar"></label>
  <div class="col-md-4">
    <button id="btn_enviar" name="btn_enviar" class="btn btn-default">Enviar</button>
  </div>
</div>

</fieldset>
</form>

    同样在http://bootsnipp.com/，您可以找到基于 Bootstrap 的各种示例。最后这里有几个很好的教程一步一步解释：

    尽管使用英语 -> 使用翻译器，但您可以这样做或学习以下语言：

    我希望你觉得它有用：D

    • 3

  3. bootstrap 基于列布局：在以下 url，您可以找到入门信息http://getbootstrap.com/getting-started/

    简而言之，您有 12 列来传播页面的内容。因此，有很多方法可以复制您共享的表单。例如，其中一种形式如下：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="Styles/bootstrap.min.css">     
</head>
<body>
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
            <p>Ciudad</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
            <div>
                <input style="display:inline; width:60px" type="text" ></input>
                <input style="display:inline; width:60px" type="text" ></input>
            </div>
    </div>      
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
    </div>  
</body>

    请注意，类 col-xs-3 的列总数加起来为 12 列，其中数字 3 表示列数。由于 col-xs-3 是 4 倍，因此总共添加了 12 列。

    关于 bootstrap 的重要一点是根据屏幕分辨率修改内容使用的列数，因此我建议您使用我分享的链接中的文档，以便您了解如何正确使用该工具。

    问候。

    • 2