如何在 Bootstrap Grid 中实现小列大小？答案

【问题标题】：How to implement small column sizes in Bootstrap Grid?如何在 Bootstrap Grid 中实现小列大小？
【发布时间】：2018-03-06 13:04:53
【问题描述】：

我正在尝试使用 React Bootstrap Grid 进行设计，如何制作我的网格以使 COLORBAR 只占用非常小的宽度？

我正在尝试这个

<Grid>
  <Row>
    <Col lg={1}>
      <ColorBar/>
    </Col>

    <Col lg={11}>
      <Content>
    </Col>
  </Row>
</Grid>

但是ColorBar 占据了 12 节布局的很大一部分

我的内容中也会有很多 Row 元素需要响应，因此我试图坚持 Row-Col-Row 约定

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 react-bootstrap

【解决方案1】：

您可以像 Tobia 解释的那样简单地定义自己的自定义列宽 here：

【讨论】：

【解决方案2】：

为什么不改用自定义<div>。根据您的要求为其设置宽度和高度样式。

这就是你要找的：

<Row className="rowss">
  <div className="line2" />
  <Row className="margin-left column-width">
    <Col xs={12}>
    <h4> Header </h4>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 1 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 2 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 3 </p>
    </Col>
    <Col xs={3} className="content2">
    <p> Content 4 </p>
    </Col>
  </Row>
</Row>

根据您的要求在网格中分隔示例。

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Test = React.createClass({
  render() {
    return (
      <Grid>
        
        <Row className="rowss">
          <div className="line2" />
          <Row className="margin-left column-width">
            <Col xs={12}>
              <h4> Header </h4>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 1 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 2 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 3 </p>
            </Col>
            <Col xs={3} className="content2">
              <p> Content 4 </p>
            </Col>
          </Row>    
        </Row>
        
        <Row className="rowss">
          <div className="line" />
          <Col xs={12} className="content">
            <p> Here is the content </p>
          </Col>
        </Row>
        <Row className="rowss">
          <div className="line1" />
          <Col xs={3} className="content1">
            <p> Content 1 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 2 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 3 </p>
          </Col>
          <Col xs={3} className="content1">
            <p> Content 4 </p>
          </Col>
        </Row>
        
        
      </Grid>
    );
  }
});

ReactDOM.render(<Test />, document.getElementById("app"));

.col-x {
  border: 1px solid red;
}

.line {
  width: 20px;
  height: 200px;
  background-color: green;
}

.line1 {
  width: 20px;
  height: 200px;
  background-color: red;
}

.line2 {
  width: 20px;
  height: 200px;
  background-color: blue;
  border-right:2px solid white;
}

.margin-left {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.column-width {
  width: 100%;
}

.content {
  border: 1px solid red;
}

.content1 {
  border: 1px solid orange;
  background-color: lightgrey;
}

.content2 {
  background-color: grey;
  border:1px solid white;
  height: 161px;
}

.rowss {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  margin:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script>
<div id='app'></div>

【讨论】：