时间戳

首页 > 解决方案 > 水平对齐项目引导

reactjs - 水平对齐项目引导

问题描述

我的网络应用程序中有一个引导网格布局，我想将所有内容对齐在同一行。例如，当全屏加载时，卡片如下所示：

在此处输入图像描述

但是，当页面调整大小时，卡片显示如下

在此处输入图像描述

无论页面大小如何调整，我都需要让它们看起来像第一张图片，只是不确定如何去做。

下面是我的代码：

   <div className="d-flex col-sm-6">
      <div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
        <div className="row">
          <div className="d-flex col-md-8">
            <div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
              <h4>
                <b>{this.props.restaurant.name}</b>&nbsp;
                {this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
                  return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span>&nbsp;&nbsp;&nbsp;</div>);
                })}
              </h4>
             {this.props.restaurant.description}
              <br /><br />
             <span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
                <b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
              </div>
            </div>
            <div className="d-flex col-md-4">
                <img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
            </div>
        </div>
      </div>
    </div>

标签： reactjstwitter-bootstrap

解决方案

在您的代码中，您使用的 col-md-8将从 992px 的最小宽度开始工作。您可以将md替换为xs，以便它适用于所有分辨率。

推荐阅读