引导程序将选择与按钮和两个输入字段对齐

莫·阿卜杜拉林(Mo Abdelalim)

我有这个HTML引导程序表格。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <form method="POST" action="reportGenerator.php" class="form-inline">
      <div class="input-group">
        <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
        <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
        <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
          <OPTION>Sale</OPTION>
          <OPTION>Purchase</OPTION>
        </select>
        <span class="input-group-btn">
          <input class="btn btn-default" type="submit" value="Generate Report" />
        </span>
      </div>
    </form>
  </div>
</div>

输出有点奇怪,我喜欢

在此处输入图片说明

但是我想做的是将所有这些都精确地设置为一行。是否有任何引导程序类可以做到这一点?

尼克·拉吉(NiTHiN RaJ)

只需使用此代码代替您的代码即可。.在引导程序中,有一个名为Col-lg-n,col-md-n。的类。这会将屏幕划分为n列。最大n值为12。代码

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div class="container">
    <div class="row">
        <form method="POST" action="reportGenerator.php" class="form-inline">
            <div class="input-group">
                <div class="col-lg-3 col-md-3">
                    <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
                </div>
                <div  class="col-lg-3 col-md-3">
                    <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
                </div>
                <div class="col-lg-3 col-md-3">
                    <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
                        <OPTION>Sale</OPTION>
                        <OPTION>Purchase</OPTION>
                    </select>
                </div>

                <div class="col-lg-3 col-md-3">
                    <span class="input-group-btn">
                        <input class="btn btn-default" type="submit" value="Generate Report" />
                    </span>
                </div>

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

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我需要配置两个选择框和一个带按钮的输入字段

引导程序:将输入与按钮对齐

在引导程序上的按钮内对齐两个元素时出现问题

引导程序:在同一行上对齐两个按钮

带两个按钮的输入字段

将两个div按钮对齐到引导列的中心?

引导程序:如何将输入与按钮对齐

按列对齐两个引导程序表?

如何将两个按钮与其各自的表单输入对齐?

角度:将文本添加到按钮单击的现有输入字段中,其中输入和按钮由两个不同的组件呈现

引导按钮未与输入字段对齐

引导程序如何将按钮和链接并排对齐

将输入元素和标签对齐到两个单独的列中

如何将两个单选按钮的输入分配给单个字段?

在两个输入元素下方将两个并排的输入元素水平对齐

对齐两个表单和其他按钮

对齐纵向和横向两个按钮

将两个按钮对齐到行的中心

如何将两个按钮彼此对齐?

如何在HTML中使用相同的输入值来具有一个输入字段,两个按钮和两个动作

将输入字段与选择字段对齐

引导程序-同一行上的两个复选框和一个按钮

如何将按钮的输入值添加到jQuery中的两个不同的输入字段中

引导输入与按钮对齐

选择特定单选按钮时如何将编辑文本字段拆分为两个单独的字段

如何将两个按钮和视图从左到中心、从中心到右对齐

如何使用大小类和自动布局将两个UI按钮在Xib中水平对齐

对齐底部的两个按钮

无法并排对齐两个按钮