Question

我想使用Bootstrap网格将搜索按钮放在输入表单旁边的列中，但是因为＆＃34;输入＆＃34;标签和＆＃34;按钮＆＃34; tag必须在＆＃34; form-group＆＃34;中。属性，这使事情变得困难。

这是我的原始代码：

<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>

提前致谢。

Answer 1

我无法理解为什么你需要在同一form-group class内使用按钮和输入，因为你可以为它们使用单独的表格组类。实现在线表单的方法是使用.form-inline类和<form>标记。正如您想要使用网格系统的答案一样，我也提供了一个代码片段。

我添加了两个代码段

使用.form-inline类

＆＃13;

<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>

＆＃13;

使用自举网格系统

＆＃13;

<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>

＆＃13;

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

1 个答案: