如何在Bootstrap Grid中实现小列大小?

时间:2018-03-06 13:04:54

标签: twitter-bootstrap twitter-bootstrap-3 react-bootstrap

我正在尝试使用React Bootstrap Grid设计它,如何制作我的网格以使COLORBAR只占用很小的宽度? enter image description here

我正在尝试这个

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

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

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

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

2 个答案:

答案 0 :(得分:0)

您可以直接定义自己的自定义列宽,因为Tobia解释了here

答案 1 :(得分:0)

为什么不使用自定义<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>
  

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

&#13;
&#13;
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"));
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;