时间戳

首页 > 解决方案 > 如何将具有三行三列的容器转换为四行两列

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

问题描述

我在这里使用反应和引导。关于调整大小如何使每行两列以及通过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>

标签： reactjsbootstrap-4flexbox

解决方案

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：你应该从你的生活中禁止引导程序并改用material-UI。

推荐阅读