Twitter bootstrap 横模不起作用

我是新手，我正在用ReactJS。我正在尝试创建一个简单的水平形式，这对我来说似乎很难以捉摸。有人能告诉我我做错了什么吗。这和textarea的长度有什么关系吗？这就是为什么它会溢出到下一行吗？ 我想做这样的东西。

名字*{/*取4
容器的这半列的列*/}
MI{/*将1列作为标签*/}

我不确定您是否参考了bootstrap网站，因为表单可以轻松创建。
大概是这样的：
电子邮件
密码

您可以参考->

---

希望这有帮助。

没有

className

这样的东西。还有，你的上校——走了。@hungrykoala，这是JSX@hungrykoala. 我在用ReactJS。因此产生了类名。另外，你能详细说明一下col的事情吗。我不太明白。请原谅我问这是不是小事。哦，对不起。请阅读以下关于网格系统的文章：我建议检查bootstrap中的示例表单，然后在那里添加新元素@真棒：）。。如果有效，你可以投票：D

   <div className="container">
       <div className="row">   
          <div className="col-sm-12 dijitContentPane">                     
             <form id="shopcartAddressForm" className="js-validateForm form- 
   horizontal" width="100%" data-fv-framework="bootstrap">
                     <div className="col-sm-6 ">
                       <div className="form-horizontal">
                         <div className="control-group" >
                            <label for="firstName" className="col-sm-4 control- 
   label no-bold">First Name<span className="red">*</span></label>{/* Takes 4 
   columns of this half column of the container */}     
                            <div className="col-xs-10 col-sm-5">
                              <input tabindex="0" type="text" id="firstName" 
    className="form-control" aria-label="First Name" placeholder="First Name" 
    value=""/>
                            </div>
                            <label for="middleName" className="col-xs-12 col-sm- 
   1 control-label no-bold">MI</label>{/* Takes 1 column as the label */}
                             <div className="col-xs-4 col-sm-2">
                             <input tabindex="0" type="text" id="middleName" 
    className="form-control" aria-label="MI" placeholder="MI" value=""/>
                             </div>
                         </div>
                       </div>
                    </div>
               </form>
            </div>
         </div>                       
    </div>

I am not sure if you referred to bootstrap website because forms can be created easily.

Something like this:

                           <form className="col-md-5">
                                <div className="form-group row">
                                  <label for="staticEmail" className="col-sm-2 col-form-label">Email</label>
                                  <div className="col-sm-10">
                                    <input type="text" readonly className="form-control" id="staticEmail" value="email@example.com" />
                                  </div>
                                </div>
                                <div className="form-group row">
                                  <label for="inputPassword" className="col-sm-2 col-form-label">Password</label>
                                  <div className="col-sm-10">
                                    <input type="password" className="form-control" id="inputPassword" placeholder="Password" />
                                  </div>
                                </div>
                              </form>