Question

我正在尝试垂直对齐内联表单，但是，我无法这样做。下面是我使用Bootstrap的代码。你能帮忙吗？

这不是一个重复的问题。我已经在这里回顾了其他10个问题，最后在这里发布了自己的问题。

<div class="row">
    <div class="col-md-12">
        <form>
            <div class="form-group">
                <label class="control-label">Label</label>
                <input type="text" class="form-control" />
                <button class="btn btn-default" type="button">Button</button>
            </div>
        </form>
    </div>
</div>

试过了。不工作。以下是更新的代码： -

<div class="row">
    <div class="col-md-12">
        <form class="form-inline">
            <input type="text" class="form-control" />
            <button class="btn btn-default" type="button">Button</button>
        </form>
    </div>
</div>

下面是快照..输入框如何粘在上面：

Answer 1

只需添加class="form-inline"即可构建代码

＆＃13;

<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

    <body>
      
      <div class="container-fluid">
        <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
     
        <form  class="form-inline">
            <div class="form-group">
           
            
                <label class="control-label">Label</label>
              
              
                <input type="text" class="form-control" >
                
                <button class="btn btn-default" type="button">Button</button>
                </div>
                
            
        </form>
   
</div>
        </div>
        </div>
</body>
  </html>

＆＃13;

垂直对齐引导程序

1 个答案: