Question

我有这个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>

输出有点奇怪，我喜欢

但我正在尝试将它们全部设置为一行。是否有任何可以执行此操作的引导类？

Answer 1

是否有可以执行此操作的Bootstrap类？

不完全也绝对没有输入组/按钮类，因为它们只支持单个输入。

您可以使用列并删除应用于它们的填充，以便将每个输入/按钮放在一行中，并且它们之间没有空格。绝大多数CSS都是装饰性的（没有功能）只是为了显示一组统一的控件。这些可以调整，但你认为合适。

**该示例允许列折叠@ 767px以改善移动使用。如果这不合适，您可以轻松地将列设置更改为任何有意义的内容。

工作示例： 使用FullPage视图。

.form {
  margin: 20px;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.form .form-control.new-form-control,
.form button {
  border-radius: 0;
}
.form .form-control.new-form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
@media (min-width: 768px) {
  .form .form-control.new-form-control {
    border-right: 1px solid transparent;
  }
  .form button {
    height: 34px;
  }
}
@media (max-width: 767px) {
  .form .form-control.new-form-control {
    border-bottom: 1px solid transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="form">
    <div class="row no-gutter">

      <div class="col-xs-12 col-sm-3">
        <input type="text" id="From" class="form-control new-form-control" name="From" placeholder="Date From">
      </div>

      <div class="col-xs-12 col-sm-3">
        <input type="text" id="To" class="form-control new-form-control" name="To" placeholder="Date To">
      </div>

      <div class="col-xs-12 col-sm-3">
        <select id="Target" class="form-control new-form-control" name="Target">
          <option value="">Select 1 Option</option>
          <option value="Sale">Sale</option>
          <option value="Purchase">Purchase</option>
        </select>
      </div>

      <div class="col-xs-12 col-sm-3">
        <button type="submit" class="btn btn-default btn-block">
          Generate Report
        </button>
      </div>

    </div>
  </form>

</div>

Answer 2

如果您使用的是笔记本电脑，则应考虑在表单中添加col-md-[enter number from 1 to 12]。 Code

<html lang="en">
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
                    <form method="POST" action="reportGenerator.php" class="form-inline">
                        <div class="input-group">
                            <div class="row">
                                <div class="col-md-3">
                                  <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
                                </div>
                                <div class="col-md-3">
                                <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
                                </div>
                                <div class="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-md-3">
                                    <span class="input-group-btn">
                                    <input class="btn btn-default" type="submit" value="Generate Report" 
                                    </select>
                                </div>
                            </div>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
    </body>
</html>

Answer 3

只需使用此代码代替您的代码.. 在bootstrap中有一个名为Col-lg-n的类，col-md-n ..这会将屏幕划分为某个列n .max 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>

bootstrap对齐选择按钮和两个输入字段

3 个答案: