我正在尝试使用React Bootstrap Grid设计它,如何制作我的网格以使COLORBAR只占用很小的宽度?
我正在尝试这个
<Grid>
<Row>
<Col lg={1}>
<ColorBar/>
</Col>
<Col lg={11}>
<Content>
</Col>
</Row>
</Grid>
但是ColorBar
占据了12节布局的很大一部分
我在内容中也有很多需要响应的Row
元素,因此我试图坚持使用Row-Col-Row约定
答案 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>
根据您的要求在网格中分隔的示例。
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;