发表新帖
发表新帖

how to give a border to bootstrap tab contents

后端 未结
关注
9 2022
长发绾君心
长发绾君心 2021-01-30 12:17

I\'m using bootstrap tabs and it works perfectly. I\'m trying to figure out if there is a way to use bootstrap to give a border to the contents of the tabs that is connected to

相关标签:
9条回答
  • 离开以前
    2021-01-30 12:53

    Being more DRY then @goat solution, you could also reuse the panel css like: 

    .tab-content.panel
{
    border-top: none; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
}


<div>
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content panel">
        <div class="tab-pane panel-body">
            ...
        </div>
    </div>
</div>

    tab-content panel panel-default and tab-pane panel-body. Then you don't need to redefine the border and padding. Just remove the top border and top radius.

    0 讨论(0)
  • 后悔当初
    2021-01-30 12:54

    This is an example of using just bootstrap that aligns content to nav-tabs.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <div class="container border-right border-left border-bottom">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem possimus in temporibus nemo dolorem? Nemo quibusdam, rem deleniti adipisci eveniet voluptas enim provident voluptates voluptate sit! Similique voluptatem accusamus officia?
    </div>
  </div>
</body>
</html>

    0 讨论(0)
  • 隐瞒了意图╮
    2021-01-30 12:55

    Based on Popnoodles answer, adding .border .border-top-0 to .tab-pane also works in Bootstrap 4.3

      <div class="tab-content">
    <div class="tab-pane border border-top-0">
      <!-- tab content -->
    </div>
  </div>

    or in SCSS

    .tab-pane {
  @extend .border;
  @extend .border-top-0;
  @extend .p-3;
}
    0 讨论(0)
  • 星月不相逢
    2021-01-30 12:58

    I modified the answer's by @user3749683 and @Kisuka so that you don't have to change the definition of any existing bootstrap styles. Instead, you just add a new class to the parent element. I used first child selectors so that you can have nested tabs that don't necessarily need to have the bordered content too.

    .bordered-tab-contents > .tab-content > .tab-pane {
    border-left: 1px solid #ffffd;
    border-right: 1px solid #ffffd;
    border-bottom: 1px solid #ffffd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.bordered-tab-contents > .nav-tabs {
    margin-bottom: 0;
}

    markup structure

    <div class="bordered-tab-contents">
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content">
        <div class="tab-pane" ...>
            ...
        </div>
    </div>
</div>
    0 讨论(0)
  • 無奈伤痛
    2021-01-30 13:00

    The following css should do exactly what you're looking for :)

    .tab-content {
    border-left: 1px solid #ffffd;
    border-right: 1px solid #ffffd;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

    margin-bottom: 0; on .nav-tabs removes the gap in between the pills and content.

    The padding on .tab-content makes the content not pressed against the new borders on the left and right.

    0 讨论(0)
  • 失恋的感觉
    2021-01-30 13:09

    This was asked a long time ago but the trick here might help some people:

    Put in a div.container your .nav-tabs and .tab-content. To that div.container, give a fixed height says 300px and border-bottom: 1px solid #ccc and overflow: hidden !important.

    Then to the .tab-content, I add this css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

    And it works. Try it out ( http://jsfiddle.net/996Bw/ )

    0 讨论(0)
 看不清?
提交回复
热议问题