Question

我是bootstrap的新手。我将它与ReactJS一起使用。我试图创建一个简单的横向形式，这对我来说似乎相当难以捉摸。有人可以告诉我我做错了什么。它与textarea长度有什么关系吗？这就是为什么它溢出到下一行？我想做这样的事情。 Click to view image

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

Answer 1

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>

你可以参考 - ＆gt; https://getbootstrap.com/docs/4.0/components/forms/

希望这有帮助。

表格 - 水平不起作用

1 个答案: