防止Bootstrap-3网格在移动设备上崩溃

Question

我正在为一个项目使用带有bootstrap的Laravel，似乎遇到了响应问题。我有包含有关帖子的数据的卡片，这些卡片中嵌套了行。我希望这些卡片在桌面和移动设备上看起来都是一样的，但是Bootstrap总是打破我的习惯。

在台式机上，卡片看起来像我想要的那样：

​

​

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

​

​

我尝试过使用container-fixed、container-fluid以及col-xs-来代替col-md-。

这是我的代码：

​

	<div class="card card-sm">
   <div class="card-body row align-items-center">
	<div class="container">
	  <div class="col-md-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
		  <div class="col-md-8">
			 <h2>Testtitle</h2>
			 <p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
			 <hr>
			 <div class="row">
				<div class="col-md-5 align-items-center">
				   <img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;"> 
				   <h5>Some Text here</h5>
				</div>
				<div class="col-md-3"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;"></div>
				<div class="col-md-4">
				   <div>
					  <h5>Username probably..</h5>
					  <p><br>A Little bit of text there<br></p>
				   </div>
				</div>
			 </div>
		  </div>
	  </div>
   </div>
</div>

​

我在网上搜索过，但没有找到真正适合我的问题，要么是人们通常喜欢自动换行，要么是我用错了，要么是我搜索了完全错误的东西。

提前感谢！

Answer 1

​

                            <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
                            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

                            
                                  <div class="container" >
                                    <div style="overflow-x:auto;">
                                  <div class="card card-sm" style="width: 1000px;overflow-x:auto;">
                                   <div class="card-body" style="">
                                    <div class="row" >
                                    <div class="col-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
                                      <div class="col-8">
                                       <h2>Testtitle</h2>
                                       <p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
                                       <hr>
                                       <div class="d-flex" style="display: flex;">
                                        <div class="rating-img col-4">
                                           <img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;"> 
                                           <h5>Some Text here</h5>
                                        </div>
                                        <div class="user-img col-4"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;width: auto;"></div>
                                        <div class="user-info col-4">
                                            <h5>Username probably..</h5>
                                            <p><br>A Little bit of text there<br></p>
                                        </div>
                                       </div>
                                      </div>
                                    </div>
                                  </div>
                                   </div>
                                </div>
                              </div>

​

我有一个解决方案。如果您不想中断行，请使用此代码。此代码符合您的要求。我已经为响应式设置了滚动。我希望这会对你有所帮助。