那些遇到过的问题

是否可以仅使用Bootstrap创建类似pinterest的布局？

Mat*_*att 59 grid layout jquery-masonry twitter-bootstrap

我正试图让我的头脑现在已经有一段时间了:

是否可以仅使用Twitter Bootstrap创建一个pinterest布局？我知道有像砌体这样的jQuery插件,但没有它们没有办法吗？

谢谢

Ber*_*Siu 60

在http://bragthemes.com/demo/pinstrap/上找到了一个(免费)模板.这应该是你要求的.但是没有时间检查出来.

编辑2016年3月15日:引导4允许这种开箱这里.它仍处于alpha状态,但我们已经到了那里.

  • 使用javascript实现定位,而不是bootstrap. (3认同)

Chr*_*r G 19

找到这个解决方案,在bootstrap中工作(即使没有定义列大小也可以工作),不需要javascript - 我将它拼接到一个项目中并且它工作得很漂亮:

http://www.bootply.com/118335

祝福你@katiejones!

Sab*_*jad 13

编辑:这是现在开箱即用的boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

当然的事.我花了一段时间锻炼身体.希望这可以帮助!

为代码转储道歉,但它是显示网格工作所必需的.

<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>




<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>




</head>

  <div class="container">


        <div class="row masonry-container">

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->


          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

             <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->


        </div> <!--/.masonry-container  -->
      </div><!--/.tab-panel -->


<style type="text/css">
body {

  padding-top: 50px;
}

.main-container {
  padding: 10px 15px;
}

.p {
  text-align: center;
}



</style>


<script type="text/javascript">

/* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library
* on SitePoint by Maria Antonietta Perna
*/

//Initialize Masonry inside Bootstrap 3 Tab component 

(function( $ ) {

  var $container = $('.masonry-container');
  $container.imagesLoaded( function () {
    $container.masonry({
      columnWidth: '.item',
      itemSelector: '.item'
    });
  });

  //Reinitialize masonry inside each panel after the relative tab link is clicked - 
  $('a[data-toggle=tab]').each(function () {
    var $this = $(this);

    $this.on('shown.bs.tab', function () {

      $container.imagesLoaded( function () {
        $container.masonry({
          columnWidth: '.item',
          itemSelector: '.item'
        });
      });

    }); //end shown
  });  //end each

})(jQuery);


</script>
Run Code Online (Sandbox Code Playgroud)

Mat*_*att 10

是的,它有可能但有一些限制.

原理

  • 每列是div(或section取决于您的布局的含义)
  • 在每列瓦也成为div,或者img根据您的设计等.

实践

要制作列,您可以使用以下各种技术:

  • float 列
  • display: inline-block 列
  • 使用新的灵活盒子API(非标准实现正在渗透到现代浏览器中)
  • 使用新的网格定位API(虽然我现在避免使用它,因为它根本不受支持)

然后div在每列中放置各种瓷砖.同样,根据您的设计/布局,您可以用uls 替换column-div ,并有一个tile列表li.我不能说你的设计在语义上是否正确.

限制

  • 调整Pinterest页面的大小可以保持大多数元素的大致位置,即列顶部的元素通常保持在顶部附近,即使根据浏览器宽度调整列数 - 纯CSS解决方案也不会这样做.盒子.

变通

  • 虽然不是一个完美的解决方案,但您可以使用媒体查询来影响各种元素的位置.

有一段时间,人们可以非常接近Pinterest布局 - 也就是说,他们选择使用JavaScript实现所述布局可能是一个很好的理由.

Jey*_*ara 8

我知道我的答案很晚.但只是想让这个常见问题更新.我发现了3个最新的实现.

小智 5

自Bootstrap 4 起，.card-columns该类可用。此处的文档中的规范。它制作了一个很好的类似 Pinterest 的网格。

<div class="card-columns">
 <div class="card" id="card1"></div>
 <div class="card" id="card2"></div>
 <div class="card" id="card3"></div>
 <div class="card" id="card4"></div>
 <div class="card" id="card..."></div>
</div>
Run Code Online (Sandbox Code Playgroud)

但是，关于列数，我无法适应不同的屏幕尺寸。我终于设法做到了：

@media (max-width: 575.98px){ 
    .card-columns {
        column-count: 1; }
}
@media (min-width: 576px){
    .card-columns {
        column-count: 2; }
}
@media (min-width: 768px){
    .card-columns {
        column-count: 3; }
}
@media (min-width: 992px){
    .card-columns {
        column-count: 4; }
}
@media (min-width: 1200px){
    .card-columns {
        column-count: 4; }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

89756 次

最近记录：

7 年，4 月 前
相关归档
使用Bootstrap,如何将无线电输入显示为按钮？ 22
WPF中的绑定和布局关系 8
text-center和text-right在bootstrap中不起作用 6
当缩放浏览器窗口大小较小时,如何使用引导程序隐藏div之一 5
如何在使用start属性的有序列表中设置标记样式？ 5
适用于较小屏幕尺寸的Bootstrap按钮全宽 5
造型bootstrap轮播指示器 5
如何在bootstrap Tooltip上添加动画？ 4
Bootstrap 4：带有徽标和2行的Navbar 4
用户控件网格中的一行 3
难疑归档
如何将空目录添加到Git存储库？ 4039
为什么"使用命名空间std"被认为是不好的做法？ 2486
如何在JavaScript中清空数组？ 2198
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
家谱软件中的循环 1594
在YAML中,如何在多行中断字符串？ 1388
为什么在允许某些Unicode字符的注释中执行Java代码？ 1326
为PHP密码保护哈希和盐 1142
如何随机化(shuffle)一个JavaScript数组？ 1138
jQuery从下拉列表中获取选定的选项 1067