使用 Bootstrap Grid 将部分表单组放在不同的列中答案

【问题标题】：Place part of form-group in different column using Bootstrap Grid使用 Bootstrap Grid 将部分表单组放在不同的列中
【发布时间】：2017-07-20 06:34:18
【问题描述】：

我想使用 Bootstrap 网格将搜索按钮放置在输入表单旁边的列中，但是由于“输入”标签和“按钮”标签都必须在具有“表单组”属性的 div 中，这让事情变得困难。

这是我的原始代码：

<div class="row">
            <div class="col-md-12 formMove">
                <form id="getposts_form" role="form">
                    <div class="form-group">
                        <input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
                        <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        <br><div id="errors"></div>
                    </div>
                </form>
            </div>
        </div><!--end row-->

这是我对嵌套列的失败尝试：

<div class="row">
            <div class="col-md-12 formMove">
                <div class="row">
                    <div class="col-md-10">
                        <form id="getposts_form" role="form">
                            <div class="form-group">
                                <input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
                    </div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
                    <div class="col-md-2">
                                <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                                <br><div id="errors"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

提前致谢。

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3 grid

【解决方案1】：

我不明白为什么你需要在同一个form-group class 中输入按钮和输入，因为你可以为它们使用单独的表单组类。实现行式表单的方法是使用带有<form> 标记的.form-inline 类。由于您想使用网格系统获得答案，因此我也为此提供了 sn-p。

我添加了两个sn-p

使用 .form-inline 类

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
       <style type="text/css">
      
       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
     

<div class="row">
            <div class="col-md-12 formMove">
                <form id="getposts_form" class="form-inline" role="form">
                    <div class="form-group">
                        <input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
                        </div>
                         <div class="form-group">
                        <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
                        <br><div id="errors"></div>
                   
                </form>
            </div>
        </div><!--end row-->
</body>
</html>

使用引导网格系统

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
       <style type="text/css">
      
       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
     

<div class="row">
            <div class="col-md-12 formMove">
                <form id="getposts_form" class="form-inline" role="form">
                    <div class="form-group">
                    <div class="row">
                    <div class="col-md-8 col-lg-8 col-sm-8 col-xs-8"> 
                        <input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
                       </div>
                       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
                        <button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
                        </div>
                        <br><div id="errors"></div>
                    </div>
                </form>
            </div>
        </div><!--end row-->
</body>

【讨论】：

哇。我从来没想过。谢谢！