Twitter bootstrap 3 减少列的宽度并理解所使用的css

我正在看一个带有材质UI的react代码，并试图理解它 使用的类名如下所示

你能解释一下这两行吗？我想你最多只能有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>

{this.props.customer.CustomerName}

客户号：{this.props.Customer.biCustomerNumber}
发票联
覆盖*
1234567890
2345678901
信贷理由

对于bootstrap 3，一个

col-xs-12

类意味着，在

xs

下面（首先，您的组件包含太多的信息。尝试将您的代码拆分为更小的组件，以便维护。（例如，将细节提取到它自己的组件中）。关于col：您可以为每个视口定义不同的宽度。

col-xs-12 col-sm-6

=视口中的12 col

xs

，视口中的6 col

sm

太好了。现在我如何减小此列的宽度？完整的12列宽度将是

覆盖部分的宽度。调整该类的宽度。除非你可以为我提供CSS，否则我不能提供确切的解决方案。
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">

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