此问题在此处已有答案：
How to center content in a Bootstrap column?（11个答案）
四个月前关门了。
我用bootstrap和react创建了一个简单的网页。
我在桌面屏幕上看到：
而我在移动的屏幕上有这样一段话：
我有这个App.js：
import Navbar from "./components/navbar";
import Card from "./components/card";
import React, { Component } from "react";
import marconi from "./images/marconi.webp";
import massolo from "./images/massolo.webp";
// etc etc other pics import
class App extends Component {
state = {
cards: [
{id: 0, nome: "Marconi", prezzo: "300k", immagine:marconi},
{id: 1, nome: "Massolo", prezzo: "100k", immagine:massolo},
// etc etc
]
}
render(){
return (
<>
<Navbar />
<div className="container">
<h1> Ciao </h1>
<hr></hr>
<div className="row">
{this.state.cards.map(card => (
<Card
key={card.id}
nome={card.nome}
prezzo={card.prezzo}
immagine={card.immagine} />
))}
</div>
</div>
</>
);
}
}
export default App;还有这张卡.js：
import React, { Component } from "react";
class Card extends Component{
render(){
return (
<div className="col">
<div className="card text-center" style={{ width: "18rem" , marginTop: 40}}>
<img src={this.props.immagine} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{this.props.nome}</h5>
<p className="card-text">
Prezzo = €{this.props.prezzo}
</p>
<button className="btn btn-dark">
Compra
</button>
</div>
</div>
</div>
)
}
}
export default Card;我尝试了几种方法，但都不能达到我想要的效果。我想把移动的版（只有一张卡）放在中间，而桌面版就像现在一样。
呈现的HTML：https://filebin.net/2p9imydkdtdjgj66/renderedHTML.txt
2条答案
按热度按时间hrysbysz1#
在没有看到呈现的输出的情况下很难确定，但我敢打赌，column元素上的
align-items-center或text-center都可以。368yc8dk2#
使用Bootstrap时，可以为每个
col指定xxl, xl, lg, md, and sm断点。因此，不要只使用
<div class="col"></div>，而要使用<div class="col-lg-3 col-8"></div>，这样在min-width: 992px（lg断点）处，卡片会排成4行。然后在992px以下，卡片只跨越col-8。对于要在移动的上居中的卡，请将
justify-content-center类添加到.row，以便它将每张卡居中。