Question

我正在创建一系列卡片，使用引导程序在屏幕上同时显示图像和文本。卡片在桌面上呈现预期的效果（请参见下文），但在移动设备上无法正确呈现（我需要将图像和文本放在与桌面版本相同的行上）。

在移动设备上，它看起来像这样：

我正在尝试使其全部内联（就像grubhub一样）

我的代码如下：

 <div className="container">
   <div className="row">
     <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-sm-8">
              <div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
              <h4>
              <b>{this.props.food.name}</b>
          </h4>
         <p style={{'fontWeight': 300}}>{this.props.food.description}</p>
         <span className="munchtime pointer" style={{'fontSize': 16, 'fontWeight': 600}}>Add to Cart</span><br /><br />
         {priceLabel}
        </div>
      </div>
      <div className="d-flex col-sm-4">
        <img src={this.props.food.images[0]} style={{width: '100%', height: 180, objectFit: 'cover'}} />
      </div>
    </div>
  </div>
  </div>
 </div>
</div>

任何建议都值得赞赏！

Answer 1

基本上，您需要分别将列col-sm-8和col-sm-4分别更改为col-8和col-4。我做了一个基本的例子，展示了这一点，其中还包括您的一些风格：

.card-wrapper {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #EAE8E8;
}

.info-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
}

.custom-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container">
<div class="row">

  <!-- Card 1 -->
  <div class="col-sm-6">
  <div class="row m-1 card-wrapper">

    <div class="col-8 info-wrapper">
      <h4><b>Food Name</b></h4>
      <p>Food Description</p>
    </div>

    <div class="col-4 p-0">
      <img class="custom-img" src="https://via.placeholder.com/250"/>
    </div>

  </div>
  </div>

  <!-- Card 2 -->
  <div class="col-sm-6">
  <div class="row m-1 card-wrapper">

    <div class="col-8 info-wrapper">
      <h4><b>Food Name</b></h4>
      <p>Food Description</p>
    </div>

    <div class="col-4 p-0">
      <img class="custom-img" src="https://via.placeholder.com/250"/>
    </div>

  </div>
  </div>

</div>
</div>

在移动设备上的同一行上对齐图像和文本

1 个答案: