如何将具有三行三列的容器转换为四行两列

【问题标题】：How to convert a container having three rows and three column into four rows and two columns如何将具有三行三列的容器转换为四行两列
【发布时间】：2020-04-21 16:37:30
【问题描述】：

我在这里使用 react 和 bootstrap。关于调整大小如何使每行两列以及通过css将行数设为四？我不想在这里使用 javascript 或 jquery。

请切换到全屏视图

在调整大小时，我想要两列四行。

class Right extends React.Component {
render(){
return(
<div className="container">
<div className="row">
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse ry="10.26" rx="10.461" cy="10.643" cx="20.613" stroke-width=".393" paint-order="markers stroke fill"/><ellipse cx="20.613" cy="10.677" rx="9.542" ry="9.441" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/></svg>
<label className="icolabl">1</label>
</object>
</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse ry="10.26" rx="10.461" cy="10.643" cx="20.613" stroke-width=".393" paint-order="markers stroke fill"/><ellipse cx="20.613" cy="10.677" rx="9.542" ry="9.441" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse ry="8.521" rx="8.889" cy="10.61" cx="20.68" stroke-width=".33" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.638" rx="8.108" ry="7.841" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/></svg>
<label className="icolabl">2</label>
</object>

</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/></svg>
<label className="icolabl">3</label>
</object>

</div>
</div>
<div className="row">
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/></svg>
<label className="icolabl">4</label>
</object>

</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/></svg>
<label className="icolabl">5</label>
</object>

</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/></svg>
<label className="icolabl">6</label>
</object>

</div>
</div>
<div className="row">
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/></svg>
<label className="icolabl">7</label>
</object>

</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/><ellipse cx="20.88" cy="10.977" rx="2.728" ry="2.059" stroke-width=".09" paint-order="markers stroke fill"/><ellipse ry="1.895" rx="2.488" cy="10.984" cx="20.88" fill="#fff" stroke-width=".082" paint-order="markers stroke fill"/></svg>
<label className="icolabl">8</label>
</object>

</div>
<div className="col-lg">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/><ellipse cx="20.88" cy="10.977" rx="2.728" ry="2.059" stroke-width=".09" paint-order="markers stroke fill"/><path d="M20.88 9.09c-.66 0-1.293.2-1.76.555s-.73.838-.73 1.34c0 1.047 1.114 1.895 2.488 1.895s2.488-.848 2.488-1.895c0-.503-.262-.985-.73-1.34s-1.1-.555-1.76-.555z" fill="#fff" paint-order="markers stroke fill" stroke-width=".082"/><ellipse ry="1.061" rx="1.947" cy="11.115" cx="21.06" stroke-width=".055" paint-order="markers stroke fill"/><path d="M21.06 10.142c-.47 0-.923.103-1.256.286s-.52.432-.52.69c0 .54.795.976 1.776.976s1.776-.437 1.776-.976c0-.26-.187-.507-.52-.69s-.785-.286-1.256-.286z" fill="#fff" stroke-width=".05" paint-order="markers stroke fill"/></svg>
<label className="icolabl">9</label>
</object>

</div>
</div>
</div>
);
}
}


class Block extends React.Component {
render(){
return(
<div className="container-fluid">
<div className="row"></div>
<div className="col-lg" style={{textAlign: "justified"}}>
<h1>This is the 
<span style={{color: "orange"}}> left </span>
part. I want changes in the 
<span style={{color: "green"}}> right </span>
part only </h1>
</div>
<div className="col-lg">
<Right />
</div>
</div>
);
}
}
ReactDOM.render(
    <Block />, document.getElementById('content')
);
.ico {
 color: midnightblue;
    fill: mediumspringgreen;
    stroke: midnightblue;
    cursor: pointer;
    text-align: center;
}
.ico:hover{
fill: orange;
    color: orange;
    stroke: orange;
    
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="content"></div>
</body>
</html>

【问题讨论】：

  • 我不知道为什么这些列在全屏视图中没有分开。在我的项目中，列被分隔为左右列，覆盖全宽屏幕的 50%。但是，移动视图与此处显示的相同。我希望正确的 3*3 矩阵位于 4*2 矩阵中，其中 4 应该是行数
  • 我有一个解决方案给你。让我发布sn-p

标签： reactjs bootstrap-4 flexbox


【解决方案1】：

如果这就是您要找的，请告诉我。

说明 - Grid 有col-lg col-md col-sm col-xs 有这四种类型的视口选项来给你的组件一个宽度。

  • lg - large
  • md - medium
  • sm - small
  • xs - extra small

一行有 12 个单位的总可用宽度，所以写 col-sm-6 意味着你想给该组件 一半 小屏幕中的总可用宽度尺寸。并且写 col-lg-4 意味着您想在大屏幕尺寸中提供总可用宽度的 1/3。同样，您也可以使用其他屏幕尺寸。

class Right extends React.Component {
render(){
return(
<div className="container">
<div className="row">
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse ry="10.26" rx="10.461" cy="10.643" cx="20.613" stroke-width=".393" paint-order="markers stroke fill"/><ellipse cx="20.613" cy="10.677" rx="9.542" ry="9.441" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/></svg>
<label className="icolabl">1</label>
</object>
</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse ry="10.26" rx="10.461" cy="10.643" cx="20.613" stroke-width=".393" paint-order="markers stroke fill"/><ellipse cx="20.613" cy="10.677" rx="9.542" ry="9.441" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse ry="8.521" rx="8.889" cy="10.61" cx="20.68" stroke-width=".33" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.638" rx="8.108" ry="7.841" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/></svg>
<label className="icolabl">2</label>
</object>

</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/></svg>
<label className="icolabl">3</label>
</object>

</div>

<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/></svg>
<label className="icolabl">4</label>
</object>

</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/></svg>
<label className="icolabl">5</label>
</object>

</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/></svg>
<label className="icolabl">6</label>
</object>

</div>

<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/></svg>
<label className="icolabl">7</label>
</object>

</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/><ellipse cx="20.88" cy="10.977" rx="2.728" ry="2.059" stroke-width=".09" paint-order="markers stroke fill"/><ellipse ry="1.895" rx="2.488" cy="10.984" cx="20.88" fill="#fff" stroke-width=".082" paint-order="markers stroke fill"/></svg>
<label className="icolabl">8</label>
</object>

</div>
<div className="col-lg-4 col-sm-6">
<object className="ico">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.333 21.167" height="80" width="160" stroke="#000"><ellipse cx="20.613" cy="10.643" rx="10.461" ry="10.26" stroke-width=".393" paint-order="markers stroke fill"/><ellipse ry="9.441" rx="9.542" cy="10.677" cx="20.613" fill="#fff" stroke-width=".36" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.61" rx="8.889" ry="8.521" stroke-width=".33" paint-order="markers stroke fill"/><ellipse ry="7.841" rx="8.108" cy="10.638" cx="20.68" fill="#fff" stroke-width=".302" paint-order="markers stroke fill"/><ellipse ry="7.01" rx="7.678" cy="10.743" cx="20.713" stroke-width=".278" paint-order="markers stroke fill"/><ellipse cx="20.713" cy="10.766" rx="7.004" ry="6.451" fill="#fff" stroke-width=".255" paint-order="markers stroke fill"/><ellipse cx="20.647" cy="10.877" rx="6.102" ry="5.701" stroke-width=".224" paint-order="markers stroke fill"/><ellipse ry="5.246" rx="5.566" cy="10.896" cx="20.647" fill="#fff" stroke-width=".205" paint-order="markers stroke fill"/><ellipse ry="4.488" rx="4.889" cy="10.844" cx="20.68" stroke-width=".178" paint-order="markers stroke fill"/><ellipse cx="20.68" cy="10.858" rx="4.459" ry="4.13" fill="#fff" stroke-width=".163" paint-order="markers stroke fill"/><ellipse cx="20.814" cy="10.877" rx="3.972" ry="3.471" stroke-width=".141" paint-order="markers stroke fill"/><ellipse ry="3.194" rx="3.623" cy="10.888" cx="20.814" fill="#fff" stroke-width=".129" paint-order="markers stroke fill"/><ellipse ry="2.881" rx="3.349" cy="10.877" cx="20.847" stroke-width=".118" paint-order="markers stroke fill"/><ellipse cx="20.847" cy="10.886" rx="3.054" ry="2.651" fill="#fff" stroke-width=".108" paint-order="markers stroke fill"/><ellipse cx="20.88" cy="10.977" rx="2.728" ry="2.059" stroke-width=".09" paint-order="markers stroke fill"/><path d="M20.88 9.09c-.66 0-1.293.2-1.76.555s-.73.838-.73 1.34c0 1.047 1.114 1.895 2.488 1.895s2.488-.848 2.488-1.895c0-.503-.262-.985-.73-1.34s-1.1-.555-1.76-.555z" fill="#fff" paint-order="markers stroke fill" stroke-width=".082"/><ellipse ry="1.061" rx="1.947" cy="11.115" cx="21.06" stroke-width=".055" paint-order="markers stroke fill"/><path d="M21.06 10.142c-.47 0-.923.103-1.256.286s-.52.432-.52.69c0 .54.795.976 1.776.976s1.776-.437 1.776-.976c0-.26-.187-.507-.52-.69s-.785-.286-1.256-.286z" fill="#fff" stroke-width=".05" paint-order="markers stroke fill"/></svg>
<label className="icolabl">9</label>
</object>

</div>
</div>
</div>
);
}
}


class Block extends React.Component {
render(){
return(
<div className="container-fluid">
<div className="row"></div>
<div className="col-lg" style={{textAlign: "justified"}}>
<h1>This is the 
<span style={{color: "orange"}}> left </span>
part. I want changes in the 
<span style={{color: "green"}}> right </span>
part only </h1>
</div>
<div className="col-lg">
<Right />
</div>
</div>
);
}
}
ReactDOM.render(
    <Block />, document.getElementById('content')
);
.ico {
 color: midnightblue;
    fill: mediumspringgreen;
    stroke: midnightblue;
    cursor: pointer;
    text-align: center;
}
.ico:hover{
fill: orange;
    color: orange;
    stroke: orange;
    
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="content"></div>
</body>
</html>

【讨论】：

  • col-sm-6 不能解决屏幕宽度 col-6
  • @RyanNghiem 当然
【解决方案2】：

2020 年是时候使用 flexbox 和 stop grid 了。这是怎么做的：

import React from "react"

const styleBlock = { width: "50%" }

const Example = () => {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", width: "100%" }}>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
    </div>
  )
}

export default Example

这是一个肮脏的解决方案，因为你的块正在扩展，所以你绝对应该为每个块固定一个宽度，并在调整大小时使用 flexWrap 来打破行：

import React from "react"

const styleBlock = { width: 200 }

const Example = () => {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", width: "100%" }}>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
      <div style={styleBlock}>block</div>
    </div>
  )
}

export default Example

如果您想赋予块自行调整大小的能力，您可以添加 minWidth 和 maxWidth 来代替固定宽度。

PS：你应该从你的生活中禁止 bootstrap 并改用 Material-UI。

【讨论】：

  • 你能不能简单点。我一直在努力适应弯曲。它将如何与我的示例一起使用，或者您可以创建一些简单易懂的东西
  • 我的例子最简单，有什么不懂的？
猜你喜欢
  • 2019-03-31
  • 2012-01-28
  • 2016-08-15
  • 1970-01-01
  • 2018-01-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode