选项卡菜单中的Bootstrap浮动div

时间：2016-04-27 07:54:45

标签： html css twitter-bootstrap

我使用Bootstrap制作了一个标签菜单。

但我需要在页面右侧放置一些信息，与标签一致。

但我似乎无法弄明白。

到目前为止，我最终得到了这个： Div above tab menu

我需要的是这个（用Photoshop来显示我需要的东西）： Div on line with the tab menu

演示标记在这里：

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">
                <div>
                    This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
                </div>

                <ul class="nav nav-tabs" id="pageTabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                </ul>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

希望有人能帮助我朝正确的方向前进： - ）

3 个答案:

答案 0 :(得分：2)

你可以这样做：

＆＃13;
＆＃13; 
.tabbable {
 position: relative;
}

.valign {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(50%);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
   <div class="container body-content">
      <div class="container-fluid">
         <div class="tabbable">
            <div class='valign'>
               This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
            </div>
            <ul class="nav nav-tabs" id="pageTabs">
               <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
               <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
               <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
               <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
               <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
               <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
            </ul>
            <div class="container">
               <div class="tab-content">
                  <div class="tab-pane active" id="tab1">
                     <h4>Tab 1</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab2">
                     <h4>Tab 2</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab3">
                     <h4>Tab 3</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab4">
                     <h4>Tab 4</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab5">
                     <h4>Tab 5</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab6">
                     <h4>Tab 6</h4>
                     <p>Content</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
＆＃13;
＆＃13;
＆＃13;

供参考，以下是CSS中布局的一个很好的说明性指南：

以下是关于居中的两个很棒的指南：

答案 1 :(得分：1)

HTML：

<!DOCTYPE html>
<html>

  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">



                <ul class="nav nav-tabs" id="pageTabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                    <li class="right"><div class="inner">This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button></div></li>
                </ul>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

的CSS：

.right {
  float:right !important;
  padding-top: 10px !important;
}

这里有一个代码的工作示例。希望这会有所帮助：

https://plnkr.co/edit/s01bZi2OJc8xm2QlKuII?p=preview

答案 2 :(得分：0)

.clearfix:after {
  content: '';
  display: block;
  clear: both;
  }

.right-panel {
  padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">
               <div class="clearfix">
                    <div class="right-panel pull-right">
                        This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
                    </div>

                    <ul class="nav nav-tabs pull-left" id="pageTabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                        <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                        <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                   </ul>
                </div>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

相关问题
最新问题