Question

data变量包含此操作所需的所有数据，问题是前端将卡显示在另一张卡的下方，而我希望它在一行中显示3或4。我可以确保错误不是与react或graphql有关，而是在引导程序或我呈现数据的方式中发生。

我只想要一个响应式设计，所以起初我创建了一个html css bootstrap ui，它可以正常工作并且具有响应性，但是当我将其与数据结合使用时，它失去了响应性，现在显示的是一张卡片在另一张卡片下面。 / p>

这是当前情况的图片It shows that there is a card but no other card along the row

这是我的代码：

import React, { useState } from "react";
import { gql, useQuery } from "@apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
  {
    books {
      name
      id
      genre
      author {
        name
      }
      description
      rating
      image
    }
  }
`;
function BooksDisplay() {
  const { loading, error, data } = useQuery(getBooksQuery);
  var [selected, setSelected] = useState("");
  if (loading) return <p>Loading....</p>;
  if (error) return <p>Ops! Something went wrong</p>;
  return (
    <div>
      <div id="book-list">
        {data.books.map((book) => (
          <div className="container-fluid my-5 books_section">
            <div className="row">
              <div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
                <div className="card h-100">
                  <img src={book.image} className="card-img-top" alt="..." />
                  <div className="card-body">
                    <h5 className="card-title font-weight-bold text-secondary">
                      {book.name}
                    </h5>
                    <span className="card-text">
                      {book.description}
                      <div className="collapse m-0" id="collapseExample">
                        <div className="card card-body border-0 p-0">
                          {book.description}
                        </div>
                      </div>
                    </span>
                    <a
                      className="card-link d-block"
                      data-toggle="collapse"
                      href="#collapseExample"
                      role="button"
                      aria-expanded="false"
                      aria-controls="collapseExample">
                      See More
                    </a>
                  </div>
                  <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                      Authors:
                      <span>
                        {book.author.map((author) => author.name).join(" ")}
                      </span>
                    </li>
                    <li className="list-group-item">
                      Genre: <span>{book.genre.join(" ")}</span>
                    </li>
                    <li className="list-group-item">
                      Ratings: <span>{book.rating}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* <BookDetail bookid={selected} /> */}
    </div>
  );
}
function BookList() {
  return (
      <div>{BooksDisplay()}</div>
  );
}

export default BookList;

Answer 1

您需要迭代列而不是容器...

import React, { useState } from "react";
import { gql, useQuery } from "@apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
  {
    books {
      name
      id
      genre
      author {
        name
      }
      description
      rating
      image
    }
  }
`;
function BooksDisplay() {
  const { loading, error, data } = useQuery(getBooksQuery);
  var [selected, setSelected] = useState("");
  if (loading) return <p>Loading....</p>;
  if (error) return <p>Ops! Something went wrong</p>;
  return (
    <div>
      <div id="book-list">
          <div className="container-fluid my-5 books_section">
            <div className="row">
            {data.books.map((book) => (
              <div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
                <div className="card h-100">
                  <img src={book.image} className="card-img-top" alt="..." />
                  <div className="card-body">
                    <h5 className="card-title font-weight-bold text-secondary">
                      {book.name}
                    </h5>
                    <span className="card-text">
                      {book.description}
                      <div className="collapse m-0" id="collapseExample">
                        <div className="card card-body border-0 p-0">
                          {book.description}
                        </div>
                      </div>
                    </span>
                    <a
                      className="card-link d-block"
                      data-toggle="collapse"
                      href="#collapseExample"
                      role="button"
                      aria-expanded="false"
                      aria-controls="collapseExample">
                      See More
                    </a>
                  </div>
                  <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                      Authors:
                      <span>
                        {book.author.map((author) => author.name).join(" ")}
                      </span>
                    </li>
                    <li className="list-group-item">
                      Genre: <span>{book.genre.join(" ")}</span>
                    </li>
                    <li className="list-group-item">
                      Ratings: <span>{book.rating}</span>
                    </li>
                  </ul>
                </div>
              </div>
            ))}
            </div>
          </div>
      </div>
      {/* <BookDetail bookid={selected} /> */}
    </div>
  );
}
function BookList() {
  return (
      <div>{BooksDisplay()}</div>
  );
}

export default BookList;

Answer 2

只需将这两个标签放到循环之外

它将起作用。

引导卡垂直显示而不是响应

2 个答案: