te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to create a Bootstrap thumbnails grid - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to create a Bootstrap thumbnails grid - Stack Overflow

    javascript - How to create a Bootstrap thumbnails grid - Stack Overflow

    programmeradmin4浏览0评论

    I have an unknown number of thumbs to display, here is an example of the HTML rendered:

    <div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

    Here is the result:

    Question : Since I build the UI dynamically, how can I avoid the margin on the second row without creating another <div class="row-fluid">

    Update IE8 solution is required

    I have an unknown number of thumbs to display, here is an example of the HTML rendered:

    <div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

    Here is the result:

    Question : Since I build the UI dynamically, how can I avoid the margin on the second row without creating another <div class="row-fluid">

    Update IE8 solution is required

    • javascript
    • css
    • layout
    • twitter-bootstrap
    • web
    Share Improve this question edited Mar 4, 2013 at 16:30 Shlomi Schwartz asked Mar 4, 2013 at 16:10 Shlomi SchwartzShlomi Schwartz 8,91330 gold badges119 silver badges198 bronze badges 4
    • Will the number of items per line change? – Jamie Hutber Commented Mar 4, 2013 at 16:16
    • could change, basically it is one line with an unknown number of thumbs <div class="row-fluid"><ul class="thumbnails"><li>....<li> – Shlomi Schwartz Commented Mar 4, 2013 at 16:18
    • Ye but my thinking is, assuming the width of its parent won't change you will always have the 5th li at the start? – Jamie Hutber Commented Mar 4, 2013 at 16:19
    • This is way behind you now but I would just change the location of the margin to the other side i.e. on the right rather than the left. It make sense to think that when a thumbnail gets on the page it should say "whoever else es next stay this far away from me" this would always be fine even if no one else came along rather than say "when I get here, I stay this far away from whoever is here" which as your question shows might not apply if it was the first one around. You would also get consistent column alignment that way (sorry I think in analogies hence the story) – Obi Commented Jun 13, 2014 at 10:15
    Add a ment  | 

    3 Answers 3

    Reset to default 8

    Assuming the width won't change of the LI's parent using :nth-child(4n) should work to target the x element.

    .row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

    See the spec for details on how to write formulas for :nth-child().

    A very very basic Fiddle displaying it working.

    Update

    To work with IE8 just use jQuery (assuming you're using it) 

    $('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

    I do believe that should do the trick.

    I had a case where the margin was ok to have, but it had to be consistent on all rows.

    You could achieve this by adding in a blank <li style="display:none"></li> to the start of the list. That way Bootstrap targets the margin removal on a <li> that isnt shown.

    Having a margin may not be acceptable, but I feel this is an elegant solution without the need for mixing style into js.

    Had same issue, not clean, but a fast workaround was the following:

    .row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论