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; } ?>html - How to add a gap between column without moving to another row in bootstrap 5? - Stack Overflow

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

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>html - How to add a gap between column without moving to another row in bootstrap 5? - Stack Overflow

    html - How to add a gap between column without moving to another row in bootstrap 5? - Stack Overflow

    programmeradmin3浏览0评论

    I'm working on a testimonial section that has a structure like this :

    <link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
    <div class="row"> (row of the testimonial card)
        <div class="col"> (content/testimonial card)
        <div class="col"> (content/testimonial card)
    </div>
</div>

    I'm working on a testimonial section that has a structure like this :

    <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
    <div class="row"> (row of the testimonial card)
        <div class="col"> (content/testimonial card)
        <div class="col"> (content/testimonial card)
    </div>
</div>

    there are more row and column inside of each column (testimonial card) for layout purpose

    The problem is when i try to add a gap on "row of the testimonial card" the testimonial card would stack into 1 columns instead of 2 (what it supposed to be) even if the gap is the lowest

    • first i tried using row-cols-2 and it doesn't work
    • second i tried to decrease both of the card's size by adding : w-50 & col-6 (and lower) and still doesn't work
    • the last step is i tried removing the "container" class that holds the row and column (cards) and then again, still doesn't work

    What it should look like :

    The result :

    • html
    • css
    • layout
    • bootstrap-5
    • bootstrap-grid
    Share Improve this question edited 2 days ago Naeem Akhtar 1,2761 gold badge12 silver badges23 bronze badges asked 2 days ago XylaXyla 133 bronze badges New contributor Xyla is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 4
    • 1 Please provide a proper minimal reproducible example of the issue. – C3roe Commented 2 days ago
    • Did you read the documentation? getbootstrap/docs/5.0/utilities/spacing – VDWWD Commented 2 days ago
    • You can set the padding of a column without affecting the placement of a column. – KIKO Software Commented 2 days ago
    • @VDWWD yes i did, and i found nothing that helps – Xyla Commented 2 days ago
    Add a comment  | 

    2 Answers 2

    Reset to default 0

    You can add gutters between the columns and rows as per your requirement.

    But, when you add gutter between the columns you need to apply the border to child element of .col element otherwise they will appear as adjacent.

    Hope this helps.

    eg:

    <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container overflow-hidden text-center d-flex ustify-content-between">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
  </div>
</div>

<hr class="my-5" />

<div class="container">
  <div class="row g-2"> <!--(row of the testimonial card)-->
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
  </div>
</div>

    Add gutters between columns and see if it helps.

    <link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-4">(row of the testimonial card)
    <div class="col">
      (content/testimonial card)
    </div>
    <div class="col">
      (content/testimonial card)
    </div>
  </div>

    Checkout the documentation: Bootstrap Horizontal Gutters

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论