防止Bootstrap-3网格在移动设备上损坏

Question

我正在使用带有引导程序的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>

我有一个解决方案。如果您不想中断行，请使用此代码。此代码是根据您想要的。我把滚动响应。 希望对您有所帮助。