Fatal编程技术网
  • html/
  • Html 在引导3中垂直对齐窗体控件

Html 在引导3中垂直对齐窗体控件

html css forms twitter-bootstrap-3

Html 在引导3中垂直对齐窗体控件,html,css,forms,twitter-bootstrap-3,row,Html,Css,Forms,Twitter Bootstrap 3,Row,在这个网站上有很多帮助，加上我自己的努力，我终于解决了所有专栏的问题。现在我想知道是否有一种bootstrap3方式（没有自定义CSS）来对齐不同的表单控件（Bottstrap自己的以及来自第三方的，如jqueryui）垂直 自身能否控制其所有子项的高度（或垂直间距） 下面是我的示例，它显示了真正的列配置和不同表单控件的标记，这些控件故意不具有相同的高度 <html> <head> <meta name="viewport" content=

在这个网站上有很多帮助，加上我自己的努力，我终于解决了所有专栏的问题。现在我想知道是否有一种
bootstrap3
方式（没有自定义CSS）来对齐不同的表单控件（Bottstrap自己的以及来自第三方的，如
jqueryui
）垂直

自身能否控制其所有子项的高度（或垂直间距）

下面是我的示例，它显示了真正的列配置和不同表单控件的标记，这些控件故意不具有相同的高度

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    </head>
    <body>

        <div class="container">  
            <div class='row'>
                <form role="form">
                    <div class='col-lg-3'>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail">Widget 1<br></br>Line #2 for 1</div></div>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group"><h2>Widget 2</h2></div></div>
                    </div>

                    <div class='col-lg-3'>
                            <div class='col-xs-12 col-md-6 col-lg-12' ><div class="form-group thumbnail"><label for="widget3">Label for 3:</label><input type="text" class="form-control" placeholder="Widget 3" id="widget3"/></div></div>
                            <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail"><p>Widget 4</p></div>
                    </div></div>

                    <div class='col-lg-3'>
                        <div class=' col-xs-12 col-md-6 col-lg-12'><div class="form-group"><span class="thumbnail">Widget 5</span></div></div>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="input group"><input type="text" class="form-control" placeholder="Wdget 6"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div>
                    </div>
                </form>
            </div>    
        </div>    

        <!-- Latest compiled and minified JavaScripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>


小部件1

第2行为1
小部件2
3的标签：
小部件4

小部件5
与JSFiddle相同

还有一件事。在上面的示例中（但不是在我的真实布局中）
glyphicon
附加组件
不显示在
元素的右侧，而是堆叠在下面。我做错了什么？有没有我注意不到的打字错误？
EDIT（0405/14）2014年2月4日，
Arbel
发现了我的“
input group
”打字错误这不再是问题。

其他问题（2014年3月4日）：

  • 是什么将
    md
    视图上的
    Widget 3
    推到右侧的

  • 如何强制
    Widget 4
    和
    Widget 5
    在
    md
    视图上交换位置（当它们位于不同的行中时）？我试图将
    向右拉
    类添加到
    Widget 4
    中，但没有产生预期的结果

    • 对于垂直间距：从

    整个引导过程中的组件使用一些默认变量 设置公共值

    因此，您需要编辑这些值

    对于附加组件，在最后一行，将
    更改为

    演示：

    垂直间距：从

    整个引导过程中的组件使用一些默认变量 设置公共值

    因此，您需要编辑这些值

    对于附加组件，在最后一行，将
    更改为

    演示：

    由于u使用的类的宽度为100%，glyphicon出现在下一行，因此要解决此问题，请在输入标记中添加style=“width:80%；float:left”&class=“form control”（用于文本框）然后将glyphicon放在标记后面…我希望这有帮助，因为u使用的类将宽度作为100%，glyphicon出现在下一行，因此要解决这个问题，请在输入标记（用于文本框）中添加一个style=“width:80%；float:left”&class=“form control”，然后将glyphicon放在标记后面…我希望这有帮助

    
小部件1
    第2行为1
小部件2
3的标签：
小部件4
    
小部件5
    glyphicon问题修复了表单组中的打字错误。

    
小部件1
    第2行为1
小部件2
3的标签：
小部件4
    
小部件5
    glyphicon问题修复了您在表单组中的输入错误。

    对于您的其他问题，我已更新了您的JSFIDLE

    1-小部件2保持在右侧的原因是，当您使用
    col xx
    类时，您需要清除引导程序使用的浮动。我通过在包含
    col-lg-3
    类的每个较大div之间插入
    来实现这一点。或者，您可以将class
    行
    添加到这些d类中ivs，因为它为您清除浮动，但确实会导致保证金的变化。这将为您提供这些div上的
    class=“row col-lg-3”

    2-这可能不是“最佳”解决方案，但您可以复制小部件4和小部件5，并利用引导的
    hidden xx
    和
    visible xx
    类。我将小部件5与
    class=“visible md”放在一起
    在小部件4下，将
    隐藏md
    添加到它的类中。我在小部件5的位置做了完全相反的操作，将小部件4的
    向右拉
    额外修改为
    向左拉
    ，因为您希望它位于小部件6的左侧

    更新：

    2的替代解决方案。我编写了一些jQuery/Javascript，当屏幕变为中等大小时（992-1200基于引导文档），它们将交换小部件4和小部件5的html

    var widget4=$（'#widget4'）.html（）；
var widget5=$（'#widget5'）.html（）；
resizeCheck（）；//在屏幕以中等大小加载时加载运行
$（窗口）.on（'resize'，resizeCheck）；//运行时调整窗口大小
函数resizeCheck（）{
变量宽度=$（窗口）.width（）；
如果（宽度>=992&&width<1200）{
中等宽度（）；
}否则{
恢复边缘（）；
}
}
函数mediumWidth（）{
$（'#widget4'）.html（widget5）；
$（'#widget5'）.html（widget4）；
}
函数restoreWidgets（）{
$（'#widget4'）.html（widget4）；
$（'#widget5'）.html（widget5）；
}
    关于您的其他问题，我有u 
          <div class="container">  
<div class='row'>
    <form role="form">
        <div class='col-lg-3'>
          <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail">Widget 1<br/>Line #2 for 1</div></div>
            <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group"><h2>Widget 2</h2></div></div>
        </div>

        <div class='col-lg-3'>
                <div class='col-xs-12 col-md-6 col-lg-12' ><div class="form-group thumbnail"><label for="widget3">Label for 3:</label><input type="text" class="form-control" placeholder="Widget 3" id="widget3"/></div></div>
                <div class='col-xs-12 col-md-6 col-lg-12 pull-right'><div class="form-group thumbnail"><p>Widget 4</p></div>
        </div></div>

        <div class='col-lg-3'>
            <div class=' col-xs-12 col-md-6 col-lg-12'>
                <div class="form-group">
                    <span class="thumbnail">Widget 5</span>
                </div>
            </div>
            <div class='col-xs-12 col-md-6 col-lg-12'>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Wdget 6"/>
                    <span class="input-group-addon glyphicon glyphicon-calendar"></span>
                </div>
            </div>
        </div>
    </form>
</div>    

    var widget4 = $('#widget4').html();
var widget5 = $('#widget5').html();

resizeCheck(); //Run on load incase screen loads in medium size

$(window).on('resize', resizeCheck); //Run on window resize

function resizeCheck() {
    var width = $(window).width();

    if(width >= 992 && width < 1200) {
        mediumWidth();
    } else {
        restoreWidgets();
    }
}

function mediumWidth() {    
    $('#widget4').html(widget5);
    $('#widget5').html(widget4);
}

function restoreWidgets() {
    $('#widget4').html(widget4);
    $('#widget5').html(widget5);
}