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

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

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

更改此项：

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

为此：

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

col-12是你可以说100%的宽度，然后用col-6把它分成两半

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

col-6 col-lg-6-适用于台式机 col-md-6-片剂 col-sm-6-用于电话

---

将您的代码替换为以下代码-

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

如需更多帮助：

---

请使用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>

---

这是使用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>

添加.d-flex.flex行。如下图所示：

促销代码 促销代码

---

@Madhummunasing你能详细解释一下吗。仍然不起作用……这无助于给你一个更好的答案。@Madhummunasing他只在宣传代码周围的两个分区上。不是那些被替换的2I的父div，但它仍然提供相同的输出。div没有分隔为两列。如果要访问stackoverflow，请编辑您的答案，因为目前无法理解代码的作用。为您的解决方案提供一个示例和解释。

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