私は React Bootstrap を使用しており、Axios を使用して API からデータを取得しています。その API からのデータをブートストラップ Card/CarDeck コンポーネントに表示しようとしています。以下のコードを使用するとほとんどの機能が動作しますが、レイアウトに問題があります。
カード デッキの応答性を高め、画面サイズに応じて 1 行に柔軟な数のカードを表示できるようにしたいと考えています。現時点では、応答に多くの項目がある場合、各カードは途方もなく薄くなり、表示できなくなります。これを行う正しい方法は何ですか?
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;
------------------------
最終的に、これが私が行った以下の解決策です。私が思う重要な点は次のとおりです:
カードデッキを <Container> でラップします。次に、<Col className="container-fluid mt-4"> でカードをラッピングします。
`
const renderCard = (card, index) => {
return (`
<Col className="container-fluid mt-4">
{/* <Card key={index} className="box"> */}
<Card style={{ width: "18rem" }} key={index} className="box">
<Card.Header>
{card.brand} - {card.series}
</Card.Header>
<Card.Img variant="top" src={card.front_image} fluid />
<Card.Body>
<Card.Title>
{card.player} (#
{card.card_number.$numberDouble}) {card.variation}
</Card.Title>
{/* <Card.Text className="d-flex">{card.player}</Card.Text> */}
{/* <Card.Text>{card.player}</Card.Text> */}
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroupItem>
Print Run - {card.print_run.$numberDouble}
</ListGroupItem>
<ListGroupItem>Career Stage - {card.career_stage} </ListGroupItem>
<ListGroupItem>For Trade - {card.forTrade}</ListGroupItem>
</ListGroup>
<Card.Footer className="text-muted">{card.team}</Card.Footer>
</Card>
</Col>
//{/* </Col> */}
);
};
return (
<Container>
<Button variant="primary">Filter By Brand</Button>{" "}
<Button variant="primary">Filter By Player</Button>{" "}
<Button variant="primary">Filter By Team</Button>
<CardDeck>{cardInfo.map(renderCard)}</CardDeck>
</Container>
);`
0
------------------------
この問題に対する私の提案は次のとおりです。
各カードには、一定量未満に縮小しないように最小幅を設定する必要があります。したがって、幅の代わりに「18rem」を使用します。 min-width: "18rem" を試してください。 CSS が適切に設定されていれば、他のカードが次の行にオーバーフローするはずです。
前述のように、メディア クエリまたはグリッド レイアウトを利用して、表示するカードの数を決定できます。さまざまな幅に基づいたさまざまな画面タイプについては、このリンクを参照してください。
また、CSS フレックスボックス レイアウトを使用してみることもできます。この CSS フレックス ボックスに関する記事があります。
2020 年 9 月 4 日 21:47 に回答
ダルトン ホワイト
ダルトン ホワイト
667
1
金バッジ 1 個
8
銀バッジ 8 個
15
銅バッジ 15 個
2
この質問にご協力いただきありがとうございます。これらのリソースを見ていきます :)
– スチュアート ブラウン
2020 年 9 月 4 日 22:16
どういたしまして。実際にコンテナ コンポーネントを使用せずに取り込んだことに気付きました。レスポンシブ デザインと同様に、CardDeck を Container コンポーネントでラップすることが重要です
– ダルトン・ホワイト
2020 年 9 月 4 日 23:25
------------------------
幅を固定する代わりに、各カードに列「n」を使用してみてください。
...
import { Card, Col } from 'react-bootstrap';
...
<Col md="n"> // n must be your desired width like
<Card key={index} className="box">
...
</Col>
詳細については、ブートストラップ カードのサイジングをご覧ください。
3
1
どうもありがとうございました。これはうまく機能しますが、カード内のコンテンツは折り返されないため、<Card.Text>{card.player}</Card.Text> の値がカードの幅を伸ばす長い文字列です
– スチュアート茶色
2020 年 9 月 4 日 22:12
それについてはわかりませんが、<Card.Text className="d-flex">{card.player}</Card.Text> を使用できるかもしれません。
– イアゴ・カラザンス
2020 年 9 月 4 日 22:22
残念ながらそうではありません。私にとって役に立った答えを投稿しました。時間を割いてご協力いただきありがとうございます :)
– スチュアート ブラウン
2020 年 9 月 7 日 21:26
