bootstrap3中的内联表格

我试图在（bootstrap-css）列中找到彼此相邻的2个输入字段，但看起来似乎无法正确显示。bootstrap3中的内联表格

还当我把两个输入字段中输入相同的组中，除去这并不能帮助：

... 
    </div> 
    <div class="input-group ">

我怎样才能得到他们彼此相邻，并使用全宽？

来源

2017-03-27 FeedTheWeb

你需要让这两个输入组一个山坳-MD-6，这里是结果：link

<div class="row"> 
    <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post"> 
     <div class="input-group col-md-6 col-sm-6 col-xs-6"> 
      <input class=" form-control " placeholder="city" id="location" type="text" name="location"> 
     </div> 
     <div class="input-group col-md-6 col-sm-6 col-xs-6"> 
      <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="submit"> 
        <span class=" glyphicon glyphicon-search" ></span> 
       </button> 
      </span> 
     </div> 
    </form> 
</div>

编辑我把它加入COL-SM-6工作在较小的屏幕和col-XS-6藏汉

来源

2017-03-27 12:12:34

不把他们放在同一行。我没有看到你链接的任何区别。 – FeedTheWeb

@lxer对不起，但它确实把它们放在同一行，你确定你点击了正确的链接？或者你需要使fidlle中的html空间更大。 –

谢谢，使html空间变大似乎有所帮助。任何想法如何使它在较小的列上工作？ – FeedTheWeb

引导内嵌表格

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 

 

 

 
    <form id="searchform" action="" accept-charset="utf-8" method="post"> 
 
     <div class="col-md-6"> 
 
     <div class=" form-group"> 
 
      <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
     <div class="form-group input-group"> 
 
      <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
 
      <span class="input-group-btn"> 
 
        <button class="btn btn-danger" type="submit"> 
 
         <span class=" glyphicon glyphicon-search" ></span> 
 
      </button> 
 
      </span> 
 
     </div> 
 
     </div> 
 

 

 
    </form> 
 
    </div> 
 
</div>

来源

2017-03-27 12:17:09 Momin

请检出@lxer – Momin

我想你只是想form-control和input-group。

<div class="row"> 
     <div class="col-md-6"> 
      <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post"> 
       <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
       <div class="input-group"> 
        <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
        <span class="input-group-btn"> 
        <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </span> 
       </div> 
      </form> 
     </div> 
    </div>

Demo

编辑：另一种选择是使用网格列，但去除填充：

.pr-0{ 
    padding-right:0; 
} 
.pl-0{ 
    padding-left:0; 
} 

<form class="row" id="searchform" action="" accept-charset="utf-8" method="post"> 
     <div class="col-xs-6 col-sm-3 pr-0"> 
      <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
     </div> 
     <div class="col-xs-6 col-sm-3 pl-0"> 
      <div class="input-group"> 
       <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
       <span class="input-group-btn"> 
        <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </span> 
      </div> 
     </div> 
</form>

看到demo

来源

2017-03-27 12:23:40 ZimSystem

你知道为什么这些字段没有填满col-md-6的空间吗？ – FeedTheWeb

我以为你已经接受了答案。我编辑了我的答案，以提供一个替代选项。 – ZimSystem

第二项假设你想要e旁边的input其他，请参考代码：

请在全页面查看结果。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form action="" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Username"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Password"> 
 
    </div> 
 
</form>

来源

2017-03-27 12:23:43 nashcheez

bootstrap3中的内联表格

回答

相关问题