React Bootstrap卡和CardDeck组件-响应式布局

编程问答 2022-08-12

问题描述

我正在使用React Bootstrap，并正在使用Axios从API提取数据。我正在尝试在引导卡/ CarDeck组件中显示该API的数据。我大部分使用下面的代码工作，但布局有问题。

我希望能够使卡片组响应并根据屏幕尺寸每行显示灵活的卡片数量。目前，如果响应中有很多项目，那么每张卡片都太薄了，无法查看。正确的方法是什么？

import React,{ useState,useEffect } from "react";
import CardDeck from "react-bootstrap/CardDeck";
import Card from "react-bootstrap/Card";
import axios from "axios";
import Container from "react-bootstrap/Container";

const CardColumns = () => {
  const [cardInfo,setData] = useState([]);
  console.log(cardInfo);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards"
      )
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  },[]);

  const renderCard = (card,index) => {
    return (
      <Card style={{ width: "18rem" }} key={index} className="Box">
        <Card.Img variant="top" src="holder.js/100px180" src={card.image} />
        <Card.Body>
          <Card.Title>
            {index} - {card.manufacturer}
          </Card.Title>
          <Card.Text>{card.player}</Card.Text>
        </Card.Body>
      </Card>
    );
  };

  return <CardDeck>{cardInfo.map(renderCard)}</CardDeck>;
};
export default CardColumns;

解决方法

最后，这是我下面的解决方案。我认为关键是：

  1. 将cardDeck包裹在import scrapy import json class MySpider(scrapy.Spider): name = 'myspider' start_urls = ['https://scrapingclub.com/exercise/ajaxdetail_header/'] def parse(self,response): print('url:',response.url) #print('headers:',response.request.headers) data = response.json() print(data) print('type:',type(data)) print('keys:',data.keys()) print('--- manually ---') print('price:',data['price']) print('title:',data['title']) print('--- for-loop ---') for key,value in data.items(): print('{}: {}'.format(key,value)) # --- run without project and save in `output.csv` --- from scrapy.crawler import CrawlerProcess c = CrawlerProcess({ #'USER_AGENT': 'Mozilla/5.0','DEFAULT_REQUEST_HEADERS': { #'User-Agent': 'Mozilla/5.0','X-Requested-With': 'XMLHttpRequest',} # save in file CSV,JSON or XML #'FEED_FORMAT': 'csv',# csv,json,xml #'FEED_URI': 'output.csv',# }) c.crawl(MySpider) c.start() 中，然后用<Container>包裹卡片：

`

<Col className="container-fluid mt-4">
,

以下是我对这个问题的建议：

  1. 每张卡应具有min-width，以确保它们不会缩水到一定数量以下。因此，请尝试使用width: 18rem而不是min-width: 18rem。如果您的CSS设置正确，则会导致其他卡溢出到下一行。
  2. 您可以使用上述的media-queries或网格布局来确定要根据不同屏幕宽度显示的各种屏幕类型显示多少张卡片，请参见此链接media-query-breakpoints react-bootstrap-grid
  3. 您也可以尝试使用CSS flexbox布局，我在此CSS Flex Box
    4. 上有一篇文章
,

尝试对每张卡使用色号而不是固定宽度。

...
import { Card,Col } from 'react-bootstrap';
...
    <Col md="n"> // n must be your desired width like
        <Card key={index} className="box">
            ...
    </Col>

您可以在Bootstrap Card Sizing

上看到更多信息
bootstrap-4react-bootstrapreactjsreactjs