在导航栏标题中扩展搜索输入

Question

在this示例中，搜索输入非常长，直到页面结束。我复制了html代码，但由于某种原因，我的代码是短的，并不能真正找出使它变长的部分？有什么诀窍？

我的导航栏代码：

public class gymArray
{
  public List<string> names { get; set; }
}

public gymArray getAllGymsByStars()
{
  gymDataTableAdapters.gymsTableAdapter gymsTableAdapter = new gymDataTableAdapters.gymsTableAdapter();
  DataTable gymsDataTable = gymsTableAdapter.getAllGymsByStars();
  gymArray gymArray = new gymArray();
  gymArray.names = new List<string>();

  foreach(DataRow row in gymsDataTable.Rows)
  {
     gymArray.names.Add(row["name"].ToString());        
  }
  return gymArray;
}

Answer 1

您需要使用.form-group和.input-group，例如：

<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="What are searching for?">
    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
  </div>
</div>

Answer 2

您引用的示例使用Bootstrap 3.1，使用3.3.x可以解释为什么它不适合您。您将遇到的其他一些示例也使用较旧版本的Bootstrap - 因此它们不适用于较新版本的BS。

这样做效果好一点。将.navbar-right类保留为100％宽度（默认值）是导致问题的原因之一，因此将其更改为95％或更低。此外，它在使用float类时似乎失败了，例如inline（这就是为什么它被转换为<div class="collapse navbar-collapse"> <form class="navbar-form" role="search"> <div class="form-group" style="display:inline; float:right; width:95%;"> <div class="input-group" style="width:100%"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-addon" style="width:1%"><span class="glyphicon glyphicon-search"></span></span> </div> </div> </form> </div> ）所以请注意那些......

<soapenv:Envelope xmlns:soapenv="aaa" xmlns:abc="bbb">
   <soapenv:Header>
      <abc:RequestHeader>
         <CountryCode>US</CountryCode>
         <MsgType>GetRefRq</MsgType>
      </abc:RequestHeader>
   </soapenv:Header>
    etc...