堆栈内存溢出
  繁体   English   中英

自举网格对齐

[英]Bootstrap grid alignment

 原文  2016-02-06 19:58:49  3   4    html

问题描述

有人可以检查我的代码并告诉我为什么<br>标记在<textarea>标记<br>之后不起作用以及为什么在Date字段之后出现混乱吗？ 

<html>
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
        <script> 
            $(document).ready(function(){
                $('#dateRangePicker').datepicker({
                    format: 'dd/mm/yyyy',
                }).on('changeDate', function(e){
                    $('#dateRangeForm').formValidation('revalidateField', 'date');
                });
            });
        </script>
    </head>
    <body>
        <h1 align="center">Some text here</h1>
        <div class="form-group">
            <div class="col-sm-3">
                <label>Full Name:</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="usr" style="width:400px;"/>
            </div><br><br>
            <div class="col-sm-3">
                <label>Father's Name:</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="usr" style="width:400px;"/>
            </div><br><br>
            <div class="col-sm-3">
                <label>Permanent Residential Address:</label>
            </div>
            <div class="col-sm-9">
                <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
            </div><br><br>
            <div class="col-sm-3">
                <label>Address for Communication:</label>
        </div>
        <div class="col-sm-9">
            <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
        </div><br><br>
        <div class="col-sm-3">
            <label>Date:</label>
        </div>   

        <div class="col-sm-3 input-group input-append date" id="dateRangePicker">
            <input type="text" class="form-control" name="date" style="width:400px;"/>
            <span class="input-group-addon add-on">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div><br><br>
        <div class="col-sm-3">
            <label>Age as on Date:</label>
        </div>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px;"/>
        </div><br><br>
        <div class="col-sm-3">
            <label>Caste:</label>
        </div>
        <div class="col-sm-9">
            <label>SC</label>
            <input type="radio"/>&nbsp&nbsp&nbsp
            <label>ST</label>
            <input type="radio"/>&nbsp&nbsp&nbsp
            <label>OBC</label>
            <input type="radio"/>&nbsp&nbsp&nbsp
            <label>GENERAL</label>
            <input type="radio"/>
        </div><br><br>
    </body>
</html>

4 个解决方案

解决方案1
 1  2016-02-06 20:29:01

如果要在元素下方添加间距（在本例中为），则应该使用CSS。 它为您提供了更多控制权，并且可以确定不同的浏览器具有相同的结果。

看到您已经在本文档中使用内联样式，可以通过说 

        <div class="col-sm-9" style="margin-bottom: 20px;">

通常，内联样式不是一个好主意-您应该使用类和ID将它确实放在单独的文件中，但我想您知道:)

解决方案2
 0  2016-02-06 20:19:42

看了一下代码，似乎您不明白 

<br>

标记用于，但如此处http://www.w3schools.com/tags/tag_br.asp所述，它插入一个换行符。 希望能有所帮助！

解决方案3
 0  2016-02-06 20:29:01

您的代码中几乎不需要修改。

问题

  1. <br>标签插入换行符，这在元素之间添加了额外的空间。

  2. 由于对input-group类的使用不正确，“ Date字段变得未对齐。

  3. &nbsp之后没有分号（;）。 正确的语法是&nbsp;

解

  1. 您可以通过将每个元素包装在form-group来消除<br>标签的需要

  2. 要对齐Date，请使用class input-group创建一个子容器。

  3. &nbsp; 不需要。 这不是编写HTML的标准方法。 请改用margin 。

已使用上述修复程序修改了您的代码。 在这里检查

解决方案4
 0  2016-02-07 06:29:17

<html>
    <head>
        <title></title>
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

            <!-- jQuery library -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

            <!-- Latest compiled JavaScript -->
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

            <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>


        <script> 
            $(document).ready(function() 
            {
                $('#dateRangePicker')
                    .datepicker(
                    {
                        format: 'dd/mm/yyyy',
                    })
                    .on('changeDate', function(e) 
                    {

                        $('#dateRangeForm').formValidation('revalidateField', 'date');
                    });
            });

        </script>

    </head>

    <body>
        <h1 align="center">Some text here</h1>

        <div class="form-group">
          <div class="col-sm-3">
            <label>Full Name:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
          </div>
        </div>
        <div class="form-group">  
          <div class="col-sm-3">
            <label>Father's Name:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3">
            <label>Permanent Residential Address:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3">
            <label>Address for Communication:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-3">
            <label>Date:</label>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-3">
            <div class="input-group input-append date" id="dateRangePicker">
              <input type="text" class="form-control" name="date" style="width:400px; margin-bottom: 10px;" />
              <span class="input-group-addon add-on">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
                 Things messed up from here ------>

            <div class="form-group">
                <div class="col-sm-3">
                      <label>Age as on Date:</label>
                </div>
            </div>

        <div class="form-group">
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
                </div>
        </div>

                <div class="form-group">
                <div class="col-sm-3">
                      <label>Caste:</label>
                </div>
        </div>
    <div class="form-group">
        <div class="col-sm-9">
            <label>SC</label>
            <input type="radio"/>&nbsp&nbsp&nbsp

            <label>ST</label>
            <input type="radio"/>&nbsp&nbsp&nbsp

            <label>OBC</label>
            <input type="radio"/>&nbsp&nbsp&nbsp

            <label>GENERAL</label>
            <input type="radio"/>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-3">
              <label>Educational Qualification:</label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-3">
            <label>Sports Event / Game:</label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-9">
            <select class="form-control" id="usr" style="width:400px; margin-bottom: 10px;">
                <option>Inspector of Income Tax</option>
                <option>Tax Assistant</option>
                <option>Stenographer-Gr. II</option>
                <option>Multitasking Staff</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-3">
              <label>Details of Best Performance:</label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
        </div>
    </div>

    </body>

</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap网格对齐问题 引导奇怪的网格对齐 引导网格对齐中断 自举图像网格对齐 带 Bootstrap 5 的网格和垂直 alignment Bootstrap网格中的垂直对齐 Bootstrap 4图像网格对齐 引导网格对齐问题 使用Angular JS进行Bootstrap网格对齐 小型设备上的Bootstrap中的网格对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM