Question

大家好我有一个三行bootstrap 4列，如下所示，但由于某种原因，它没有响应调整大小，即使我更改了媒体查询中的最小宽度，并且还在html中添加了容器流体。请somoene请告诉我我做错了什么以及我如何使其响应？谢谢您的帮助！！

<div classname="container-fluid">
            <div classname="row">

                     <div className="col-xs-4">
               <div className="card">

                   <div className="card-body">

                    <img className="card-img-top" src={trail.imgSmall}  />
        <h2 className="card-title">{trail.name}</h2>
          <div className="star-rating__ico fa fa-star-o fa-lg">{trail.stars}</div>
    <br></br>     <br></br>

            <h4 className="card-subtitle">{trail.summary}</h4>
            <p classname="card-text"> {trail.length} km </p>
            <button> <a href="{trail.link}" className="card-link"> View </a> </button>

 </div>
            </div>
            </div>
</div>
            </div>

css

@media only screen and (min-width : 480px) {


 .col-xs-4{

{ width: 20%; }
 }
}

@media (min-width: 408px) {
  .card {
    margin-left: 0;
    margin-right: 0;
    width: 50%;
    position: relative;
  left:0px;
  }
  }

.card-info {
  padding: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 2.5rem;
      grid-template-rows: 1fr 2.5rem;
  -ms-grid-columns: 3fr 1fr;
      grid-template-columns: 3fr 1fr;
}

.card-title {
  font-size: 2rem;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.card-icon {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  justify-self: right;
  width: 30px;
  height: 30px;
  background-color: LightBlue;
  border-radius: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-column-align: center;
      justify-items: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.car

Answer 1

如果您使用的是bootstrap 4，请提及。另外我不认为bootstrap 4有col-xs- *类而不是它使用col- *类，你需要为特定设备宽度添加cols而不是首先修改媒体查询以查看是否可以解决你的问题< / p>

如何使bootsrap三行列响应

1 个答案: