Как разделить строку на два столбца, используя 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

Используются гибкие стили для отображения строки с двумя столбцами

<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

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>

Answer 4

Добавьте .row перед вашими 2 столбцами, также используйте .col-6, чтобы иметь 2 столбца. Вот так:

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

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

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

Замените ваш код ниже одного -

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