Question

我正在查看具有实质性UI的React代码，并试图理解使用的className如下所示。

您能解释这两行吗？我以为您最多只能有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列。

col-sm-6表示sm以上（≥768像素），它将占用6列。

因此，这个div

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

将采用768px以下的全宽。但是，当达到768px及以上时，它将占用50％的宽度。

这还意味着，它完全等同于：

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

参考：this

减少列的宽度并了解使用的CSS

1 个答案: