Question

我正在使用React和Reactstrap构建一个简单的页面。它以非对称方式呈现，因此对于屏幕上的三行，方案为1）图-文本2）文本-img 3）图-文本。
问题在于，由于文本在图像下方环绕而导致屏幕缩小时，导致第一行和第二行之间出现双重文本视图，很难看到。如何解决？
在CSS中，我认为这是不可能的，因为媒体查询无法更改HTML结构，在这种情况下，不仅仅是隐藏元素而是更改其布置。

JSX

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import about1 from '../images/aboutstile1.jpg';
import about2 from '../images/aboutstile2.jpg';
import about3 from '../images/aboutstile3.jpg';
// import about3 from '../images';
// import about4 from '../images';
import './about.css';
import { Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button, CardImgOverlay } from 'reactstrap';

export default class About extends Component {
  render() {
    return (
      <div>
          <div className="main">

          </div>
          <br/>
          <br/>
        <Container className="cont">      
            <Row>      
                <Col className="about_tile">
                    <img className="about_tile_img" src={about2} alt=""/>
                </Col>
                    <Col className="about_text">
                        <h2>Executive Recruitment</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>          
            </Row>
            <br/>
            <Row>
            <Col className="about_text">
                        <h2>Technical Expertise</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>         
            <Col className="about_tile">
                    <img className="about_tile_img" src={about3} alt=""/>
                </Col>  
            </Row>
            <br/>
            <Row>      
            <Col className="about_tile">
                    <img className="about_tile_img" src={about1} alt=""/>
                </Col>
                    <Col className="about_text">
                        <h2>Executive Recruitment</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>    
            </Row>
            </Container>
            <br/>
            <br/>    
        </div>      
    )   
  }
}

CSS

.main {
    height: 26rem;
    background-image: url('../images/abouts7.jpg');
    background-size: cover;
    background-position: 0 9%;
  }



/* .cont {
    max-width: 100rem;
} */

.about_tile {
    width: 400px;
    height: 320px;
}

.about_tile_img {
    border-style: solid;
    border-width: 1px;
    border-color: turquoise;
    border-radius: 25px;
    position: relative;
    width: 400px;
    height: 320px
}

.about_text {
    display: block;
    justify-content: center;
}

Answer 1

不要更改html中的列顺序，而应更改每隔一行的弯曲方向。

使用引导程序4，您可以在其他每个flex-row-reverse上使用辅助类<div class="row flex-row-reverse">...</div>。

我对JSX并不熟悉，所以实际上并不是100％地添加类，但是生成的html应该看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      image
    </div>
    <div class="col-md-6">
      text
    </div>
  </div>
  <div class="row flex-row-reverse">
    <div class="col-md-6">
      image
    </div>
    <div class="col-md-6">
      text
    </div>
  </div>

</div>

修改不同屏幕的HTML结构的最佳方法（可能是通过媒体查询）

1 个答案: