如何使用div將一行分成兩列

Question

以下是我的代碼以及如何分為兩列：

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

Answer 1

改變這個：

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

對此：

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

---

col-12是你可以說 100% 的寬度然后把它分成兩半你可以使用col-6 。 您可以查看此內容以了解有關 12 列布局的更多信息。

注意：- 如果您希望它在每個設備的兩列中，那么您必須在單個節點上使用不同的類，例如：

• col-6 col-lg-6 - 用於台式機
• col-md-6 - 用於平板電腦
• col-sm-6 - 用於手機

另一個關於 SO 的答案也是如此。

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

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

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

如需更多幫助： https : //www.w3schools.com/bootstrap/bootstrap_grid_system.asp

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

Answer 6

1. 添加.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>