Question

我有一个设计，其中有4个输入字段以搜索按钮结尾，即

                        INPUT1 INPUT2 INPUT3 INPUT4 BUTTON

我需要将所有这些水平堆叠在表单标记内，并且应该与任何填充或空格内联，显示在横幅顶部的页面中心。需要使用bootstrap完成此任务。

此致 Sijo Jose

Answer 1

下面的代码可能有帮助

HTML代码： -

<div class="header">
  <div class="inner">
      <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="submit"/>
  </div>
</div>

CSS代码： -

div {
  min-height:75px;
  line-height:75px;
  text-align:center;
  color:white;
  font-weight:bold;

}

.inner {
  width:100%;
  max-width:960px;
  margin:0 auto;
}

.header {
  background:red;
}

使用boot -rap使用form-inline： -

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
form {

    margin: 0 auto;
}


  </style>
</head>
<body>

<form class="form-inline">
  <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputone">

  <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputtwo">

   <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputthree">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

</body>
</html>

Answer 2

试试这个。

<form>
  <div class="input-container">
     <div class="inline-content">
         <input type="text" value="input 1">
         <input type="text" value="input 2">
         <input type="text" value="input 3">
         <input type="text" value="input 4">
         <button type="button">button</button>
      </div>
   </div>
</form>

我还创建了一个Bootply。链接在这里。 http://www.bootply.com/XlBQ3QRLGN

Answer 3

使用bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <form>
    <label class="text-inline">
      <input type="text">
    </label>
    <label class="text-inline">
      <input type="text">
    </label>
     <label class="text-inline">
      <input type="text">
    </label>
     <label class="btn-inline">
      <input type="submit" name="submit">
    </label>
  </form>
</div>

</body>
</html>

Bootstrap内联表单 - 水平堆叠输入和按钮

3 个答案: