Bootstrap表单 - 在输入组失败后放置输入

时间:2017-06-13 21:48:42

标签: javascript html css forms twitter-bootstrap

我有一个问题,我认为这可能是非常微不足道的,但是我花了一些时间来解决,而且我不确定这是否是一个已知问题,或者我是否无法做到正确。

我有一个带有.form-horizo​​ntal类的bootstrap 3.3.6表单。 我想要有几行,每行包含不同数量的输入。当我使用输入组(即:带有插件日历按钮的输入组)时会出现问题,之后没有其他输入显示在同一行 - 中断到下一行。

为了举例说明,我创建了一个JSFiddle来演示相同的行,其中输入组作为行中的最后一行(Form2 - 在这种情况下它显然看起来很好),并且同一行反转顺序输入(Form1),以便输入组现在位于中间,并且渲染结果会破坏该行,使得此输入组之后的所有内容都显示在下面的行中。

  • 代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="form-horizontal">
  <h3>Form1</h3>
  <div class="form-group">
    <label for="input-name" class="col-sm-1 control-label">Name</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="input-name">
    </div>

    <label for="birthdate" class="col-sm-1 control-label">Birth</label>
    <div class="input-group col-sm-1">
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      <input type="text" class="form-control" id="birthdate">
    </div>

    <label for="age" class="col-sm-1 control-label">Age</label>
    <div class="col-sm-1">
      <input type="text" class="form-control" id="age">
    </div>
  </div>
</form>

<form class="form-horizontal">
  <h3>Form2</h3>
  <div class="form-group">
    <label for="input-name" class="col-sm-1 control-label">Name</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="input-name">
    </div>

    <label for="age" class="col-sm-1 control-label">Age</label>
    <div class="col-sm-1">
      <input type="text" class="form-control" id="age">
    </div>

    <label for="birthdate" class="col-sm-1 control-label">Birth</label>
    <div class="input-group col-sm-1">
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      <input type="text" class="form-control" id="birthdate">
    </div>

  </div>
</form>

  • 截图:

screenshot of the sample form showing the incorrect rendering of input-group

我看过很多类似解决方案的例子,当表单有.form-inline时,这不是我需要的。我需要它是.form-horizo​​ntal,因为我有几行输入,而不是一行。 任何人都有这样一个问题的经验,知道如何解决它?

1 个答案:

答案 0 :(得分:1)

import Data.Array.Unboxed as A main = let v = A.listArray (1,1000000000) (repeat True) :: UArray Int Bool in print (v ! 5) 输入周围的潜水中取消课程#include <iostream> #include <cstring> using namespace std; class PlDrustvo{ private: char *ime; int turi; int brclenovi; public: PlDrustvo(){ ime = new char[1]; strcpy(ime, " "); turi = 0; brclenovi = 0;} PlDrustvo(char *ime, int turi, int brclenovi){ this->ime=new char[strlen(ime)+1]; strcpy(this->ime,ime); this->turi=turi; this->brclenovi=brclenovi; } PlDrustvo(PlDrustvo &p){ this->ime=new char[strlen(p.ime)+1]; strcpy(this->ime,p.ime); this->turi=p.turi; this->brclenovi=p.brclenovi; } PlDrustvo operator+(PlDrustvo &c){ PlDrustvo temp; temp.brclenovi=this->brclenovi+ c.brclenovi; if(this->brclenovi>c.brclenovi){ temp.ime=new char[strlen(this->ime)+1]; strcpy(temp.ime,this->ime); temp.turi=this->turi; } else { temp.ime=new char[strlen(c.ime)+1]; strcpy(temp.ime,c.ime); temp.turi=c.turi; } return temp; } PlDrustvo& operator=(PlDrustvo &p){ if(this!=&p) { delete [] this->ime; this->ime=new char[strlen(p.ime)+1]; strcpy(this->ime,p.ime); this->turi=p.turi; this->brclenovi=p.brclenovi; } return *this; } bool operator>(PlDrustvo &p){ return this->brclenovi>p.brclenovi; } bool operator<(PlDrustvo &p){ return brclenovi<p.brclenovi; } friend ostream& operator<<(ostream &alek, PlDrustvo &p){ alek<<"Ime: "<<p.ime<<" Turi: "<<p.turi<<" Clenovi: "<<p.brclenovi<<endl; return alek; } friend void najmnoguClenovi(PlDrustvo*, int); }; void najmnoguClenovi(PlDrustvo *pl,int n){ int i_max = 0; for(int i=0; i<n; i++) if(pl[i].brclenovi > pl[i_max].brclenovi) i_max = i; cout << "Najmnogu clenovi ima planinarskoto drustvo: " << pl[i_max]; } int main() { PlDrustvo drustva[3]; PlDrustvo pl; for (int i=0;i<3;i++) { char ime[100]; int brTuri; int brClenovi; cin>>ime; cin>>brTuri; cin>>brClenovi; PlDrustvo p(ime,brTuri,brClenovi); drustva[i] = p; } pl = drustva[0] + drustva[1]; //HERE IS THE ERROR cout<<pl; najmnoguClenovi(drustva, 3); return 0; } 。在这种情况下不需要它。如果您坚持使用它,则可以添加课程input-group