Уменьшение ширины столбца и понимание используемых CSS

Question

Я смотрю на код реакции с пользовательским интерфейсом материала и пытаюсь понять используемое имя класса, как показано ниже.

Не могли бы вы объяснить эти две строки, пожалуйста?Я думал, что вы можете иметь максимум 12 столбцов.

            <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">

Я хочу уменьшить ширину покрываемого счета-фактуры и причину кредита, что означает уменьшение ширины столбца.Как мне этого добиться?

            <div className="row customer-form-layout">
              <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
                <div className="customer-form-details">
                <span>{this.props.customer.CustomerName}</span><br/>
                <span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>                   
                </div>

                <div className="covered-section">
                  <div className="row">
                    <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                      <FormControl className="form-control">
                        <InputLabel htmlFor="invoice-number01" shrink>Invoice
                          Covered*</InputLabel>
                        <Select
                          value=''
                          inputProps={{
                            name: 'Test-number02',
                            id: 'Test-number02',
                          }}
                        >
                          <MenuItem value='1234567890'>1234567890</MenuItem>
                          <MenuItem value='2345678901'>2345678901</MenuItem>
                        </Select>

                      </FormControl>
                    </div>

                  </div>
                </div>
                <FormControl fullWidth className="form-control">
                  <InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
                    </InputLabel>
                  <TextField
                    id="reason-field-value"
                    multiline
                    rows="8"
                    margin="normal"
                  />
                </FormControl>
              </div>

Answer 1

Для начальной загрузки 3 класс col-xs-12 означает, что ниже xs (<768px) элемент будет принимать 12 столбцов. </p>

Хотя col-sm-6, значит выше sm (≥768px), он будет занимать 6 столбцов.

Следовательно, этот div

<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">

займет полную ширину ниже 768 пикселей. Однако, когда он достигнет 768 пикселей и выше, он займет 50% ширины.

Что также означает, что полностью эквивалентно этому:

<div className="col-xs-12 col-sm-6">

---

Ссылка: https://getbootstrap.com/docs/3.4/css/#grid-options