如何使用div将一行分成两列答案

【问题标题】：How to divide a row into two columns using div如何使用div将一行分成两列
【发布时间】：2020-02-28 17:50:25
【问题描述】：

以下是我的代码以及如何分成两列：

<form onSubmit={handleSubmit(this.onSubmit)}>
    <div className="row">
        <div className="col-12 col-md-8">
            <div className="col-12 col-md-3">
                <label>Promotional Code</label>
            </div>
            <div className="col-12 col-md-3">
                <label>Promotional Code</label>
            </div>
        </div>
    </div>
</form>

【问题讨论】：

标签： html css reactjs

【解决方案1】：

改变这个：

<div className="col-12 col-md-3">

到这里：

<div className="col-6 col-md-3">

col-12 是您可以说宽度的 100%，然后将其分成两半，您可以使用 col-6。 You can check this to learn more about 12 column layout.

注意：- 如果您希望它在每个设备的两列中，那么您必须在单个节点上使用不同的类，例如：

col-6 col-lg-6 - 适用于台式机
col-md-6 - 用于平板电脑
col-sm-6 - 用于手机

Another answer on SO for the same.

【讨论】：

@MadhumiMunasinghe 你能详细说明一下吗。 仍然无法正常工作....无助于为您提供更好的答案。
@MadhumiMunasinghe 仅在 <label>Promotional Code </label> 周围的 2 个 div 上。不是那些 2 的父 div

【解决方案2】：

这是使用 flex 样式来显示具有两列的行

<form onSubmit={handleSubmit(this.onSubmit)}>
          <div style={{display: 'flex', flexDirection: 'row'}}>
               <div style={{display: 'flex', flexDirection: 'column'}}>
                    <label>Promotional Code</label>
               </div>

               <div style={{display: 'flex', flexDirection: 'column'}}> 
                    <label>Promotional Code</label>
               </div>
           </div>
    </form>

【讨论】：

【解决方案3】：

用下面的代码替换你的代码 -

   <form onSubmit={handleSubmit(this.onSubmit)}>
      <div className="row">
        <div className="col-sm-12 col-md-8">
          <div className="col-sm-6 col-md-3">
            <label>Promotional Code</label>
          </div>

          <div className="col-sm-6 col-md-3">
            <label>Promotional Code</label>
          </div>
        </div>
      </div>
    </form>

【讨论】：

我更换了，但它仍然提供相同的输出。 div 没有分成两列

【解决方案4】：

  <form onSubmit={handleSubmit(this.onSubmit)}>
      <div className="row">
        <div className="col-lg-6 col-md-3">
          <div className="col-12 col-md-3">
            <label>Promotional Code</label>
          </div>

          <div className="col-lg-6 col-md-3">
            <label>Promotional Code</label>
          </div>
        </div>
      </div>
 </form>

【讨论】：

【解决方案5】：

您好，请使用 flex，因为如果您有嵌套的行列，它会提供更大的灵活性

 <form onSubmit={handleSubmit(this.onSubmit)}>
          <div style={{display: 'flex', justifyContent: 'space-around'}}>
              <div>
                <div>Promotional Code</div>
              </div>
              <div>
                <div>Promotional Code</div>
              </div>
           </div>
        </form>

【讨论】：

【解决方案6】：

添加.d-flex .flex-row。如下：

<form onSubmit={handleSubmit(this.submit)}> <div className="row no-gutters"> <div className="col-12 col-md-8"> <div className="d-flex flex-row"> <div className="col-12 col-md-3"> <label>Promotional Code</label> </div> <div className="col-12 col-md-3"> <label>Promotional Code</label> </div> </div> </div> </div> </form>

【讨论】：

欢迎来到 stackoverflow，请编辑您的答案，因为目前无法理解代码的作用。为您的解决方案提供示例和说明。