Question

我在背景图片上的your_csv = CSV.parse("your_csv.csv") convert_weekdays = { "sunday" => 1, "monday" => 2, "tuesday" => 3, "wednesday" => 4, "thursday" => 5, "friday" => 6, "saturday" => 7 } by_columns = your_csv.transpose by_columns.first.map! { |row| convert_weekdays[row] } CSV.open("saved_csv.csv", "w") do |csv| by_columns.transpose.each { |row| csv << row } end行和6列中有2张图片。如何在小屏幕上保持相同的布局？

在小屏幕上的响应式设计中，3图像将按照预期垂直排列，但这不是我需要的。我需要找到一种方法来缩小较小屏幕的6图像，同时将它们保留在背景图像上的相同6行和2列中。

我可以发布代码，但我使用3使用Python framework，所以如果我发布所有代码，可能会让事情看起来更复杂。我只是在寻找一个简单的bootstrap framework解决方案，或者可能是一个bootstrap解决方案。

Answer 1

如果您想在所有屏幕尺寸上应用相同的布局，您只需要指定小媒体查询：

<div class="row">
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
</div>
<div class="row">
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
   <div class="col-xs-4"></div>
</div>

Answer 2

这应该做你想要的：

http://www.bootply.com/YteNmihNaO

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
  </div>
</div>

在小屏幕上保持行和列的相同

2 个答案: