how to give a border to bootstrap tab contents

后端 未结 9 2029
长发绾君心
长发绾君心 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)
提交回复
热议问题