div之间的引导网格空间增加不应该发生

时间：2017-11-21 12:08:52

标签： html twitter-bootstrap

如果屏幕的宽度增加，div之间的空间也在增加，但是不应该发生它们需要彼此靠近，当有空间时，另外一个div旁边他们从一个行中的3个div到4个div。

How it should look and looks at 320px 应该如何看，看320px

What happens when I increase the pixels to 506px this is not supposed to happen 当我将像素增加到506px时会发生什么呢？这不应该发生

This is the idea of how it all should look 这就是它应该如何看待的想法

This is how it looks on desktop. This is one is alright 这就是它在桌面上的外观。这是一个好的

这是我的HTML代码，我认为你不需要css。我希望它看起来像照片3，如果我用浏览器的repsonsive工具增加屏幕尺寸，灰色small_picture div之间的空间不会增加。

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<editor-fold desc="Bedrijfsfoto's Desktop">-->
<span style="color: #e94e18; font-size: 15px;">Bedrijfsfoto's</span>
<br>

<div class="row">
  <div class="col-md-12">
    <div id="big_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="70px" height="70px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>
</div>

<div class="row" id="desktop_small_pictures">

  <div class="col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="sp_margin col-md-1 col-md-offset-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="40px" height="40px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>


</div>

<script>
  $("#big_picture").click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
  });
  $(".small_picture").click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
  });
</script>

<br>
<!--</editor-fold>-->

<!--<editor-fold desc="Bedrijfsfoto's Mobile">-->

<div class="row" id="mobile_small_pictures">

  <div class="row">

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 10px;">

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

  </div>

  <div class="row" style="margin-top: 10px;">

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="small_picture">
        <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
        <span>Foto uploaden</span>
        <a href="uploader.html" class="clickableDiv"></a>
      </div>
    </div>

  </div>


</div>

<br>
<!--</editor-fold>-->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你需要这样的东西吗？ 将很快添加解释。

@media (min-width:1000px) {
  .row {
    display: flex;
  }
  .col-sm-3 {
    flex: 1;
  }
}


/*<editor-fold desc="Big Picture">*/

#big_picture {
  background-color: #ededed;
  height: 300px;
  width: 100%;
  border: 1px solid #c3bdbd;
  text-align: center;
  cursor: pointer;
}

#big_picture img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 100px;
}

#big_picture a {
  color: black;
}


/*</editor-fold>*/


/*<editor-fold desc="Small Picture">*/

#mobile_small_pictures {
  display: inherit;
}

#desktop_small_pictures {
  margin-top: 10px;
  display: none;
}

.small_picture {
  background-color: #ededed;
  height: 100px;
  width: 100px;
  border: 1px solid #c3bdbd;
  text-align: center;
  margin: auto;
  cursor: pointer;
}

.small_picture img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 25px;
}

.small_picture a {
  color: black;
}

.sp_margin {
  margin-left: 5.8% !important;
}


/*</editor-fold>*/


/*<editor-fold desc="Belangrijke Voorzieningen">*/

#checkboxTable {
  width: 50%;
}

#checkboxTable tr {
  background: white;
}


/*</editor-fold>*/

@media only screen and (max-width: 576px) {
  /*display none of wel*/
  #desktop_small_pictures,
  #big_picture {
    display: none;
  }
  #mobile_small_pictures {
    display: inherit;
  }
  /*small picture*/
  .small_picture {
    width: 85px;
    height: 85px;
    font-size: 12px;
  }
  /*belangrijke voorzieningen*/
  #checkboxTable {
    width: 100%;
  }
  /*bedrijfspagina*/
  #bedrijfspagina {
    margin-top: 8em;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="mobile_small_pictures">


  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>


  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>




  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

  <div class="col-xs-4 col-sm-3 col-md-1">
    <div class="small_picture">
      <img src="http://icons.iconarchive.com/icons/fasticon/twitter-square/256/twitter-square-icon.png" width="30px" height="30px">
      <span>Foto uploaden</span>
      <a href="uploader.html" class="clickableDiv"></a>
    </div>
  </div>

</div>

相关问题
最新问题