标签: twitter-bootstrap-2

下拉菜单在不正确的导航栏项下面呈现

我正在使用Bootstrap 2构建一个站点,我想在导航栏中的一个项目中添加一个下拉菜单.

很简单.但是,当下拉列表展开时,它会显示在导航栏中不正确的项目下方:

下拉菜单展开在最左侧的navbar元素下方,而不是下拉列表容器.

请注意,在上面的屏幕截图中,下拉列表呈现在"Admin"(最左边的navbar元素)下面,而不是"Locator"(激活下拉列表的元素).

如何解决此问题,以便下拉列表显示在正确的导航栏元素下方？

以下是导航栏的HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="...">Dashboard</a>

      <div class="nav-collapse collapse pull-right">
        <ul class="nav">
          <li><a href="...">Admin</a></li>
          <li><a href="...">Find Trips</a></li>

          <!-- Locator Dropdown -->
          <li>
            <a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
                   data-toggle="dropdown" data-target="#">
              Locator
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
              <li><a href="...">My Trips</a></li>
              <li><a href="...">Create Trip</a></li>
            </ul>
          </li>

          <li><a href="...">My Profile</a></li>
          <li><a href="...">Log Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

alignment drop-down-menu twitter-bootstrap-2

作者

2014 03-12

7
推荐指数

1
解决办法

4102
查看次数

Bootstrap固定大小列

我需要在bootstrap中执行固定宽度的右列列,但左列将是响应式的.

我使用bootstrap 2.3.2

http://pix.toile-libre.org/upload/original/1375170941.png

右栏不会在所有屏幕尺寸上调整大小.

html css twitter-bootstrap twitter-bootstrap-2

kor*_*nko

2019 09-05

7
推荐指数

1
解决办法

1万
查看次数

防止引导按钮组中断

当空间较小时,如何防止自举按钮进入2线？

我想使用下面的Bootstrap代码:

   <div class="btn-group" style=" width:100px ;">
        <button type="button" class="btn btn-default" style=" width:30px;">-</button>
        <input type="text" class="form-control" style="width:30px;">   
        <button type="button" class="btn btn-default" style=" width:30px;"> +</button>
    </div>

Run Code Online (Sandbox Code Playgroud)

它看起来像:

在此输入图像描述

css frontend twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-2

shm*_*zan

2015 10-12

7
推荐指数

1
解决办法

3669
查看次数

实现twitter bootstrap carousel v2.3.2

我在实现bootstrap轮播时遇到了麻烦.任何人都可以看看下面的html和js,并给我如何实现幻灯片的说明..js尚未编辑,旋转木马安装在正文英雄单元上.我是否实施了旋转木马api？如何在.js文件中定义我正在使用的轮播？谢谢.

<div class="carousel">

  <!-- Carousel items -->
  <div class="carousel-inner">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>  

  </div>      

 <!-- Carousel nav -->

  <a class="carousel-control left" href="#myCarousel" …

Run Code Online (Sandbox Code Playgroud)

html javascript carousel twitter-bootstrap twitter-bootstrap-2

arb*_*les

2015 04-01

6
推荐指数

3
解决办法

3万
查看次数

Twitter Bootstrap行嵌套

我仍然是Twitter Bootstrap和整个网格框架的新手,所以如果这看起来像是一个非常无聊的问题,请耐心等待.

但这是我到目前为止在jsFiddle中所拥有的.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Bootstrap</title>
    <link rel="stylesheet" href="install_files2/css/bootstrap.css" />
    <!-- <link rel="stylesheet" 
          href="install_files/docs/assets/css/bootstrap-responsive.css" /> -->
</head>

<body>
    <div class="container-fluid">
        <div class="row-fluid" style="background-color:;">
            <div class="span2" style="background-color:red;"></div>
            <div class="span2" style="background-color:blue;"></div>
            <div class="span2" style="background-color:red;"></div>
            <div class="span2" style="background-color:blue;"></div>
            <div class="span2" style="background-color:red;"></div>
            <div class="span1" style="background-color:blue;min-height:100px;">
            </div>
            <div class="span1" style="background-color:red;min-height:100px;">
            </div>
            <div class="span2" style="background-color:blue;"></div>
        </div>
     </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

/*!
 * Bootstrap v2.1.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License …

Run Code Online (Sandbox Code Playgroud)

html css grid twitter-bootstrap twitter-bootstrap-2

Fri*_*ian

2014 11-14

6
推荐指数

1
解决办法

2万
查看次数

Bootstrap,使行填充剩余的屏幕空间

我正在尝试创建一个网站,其标题必须具有13%的高度,并且section1必须完美地填充屏幕的其余部分,并且在第2节加上页脚的情况下,以及如果用户向下滚动那些最后两个适合屏幕.

我已经度过了一段美好的时光,我遇到的问题是容器不会超出高度,所以有一个溢出的section2和页脚在它上面.我在尝试这个:

扩展具有100%高度的父容器以考虑浮动内容

但无法使其发挥作用.

我的原始代码是一团糟,所以我尽力清理它,我可以专注于此.它看起来像这样:

HTML

<header> </header>
<div class="container-fluid">
    <div id="section1" class="row-fluid fill-height" >
        <div  class="span6" id="red-space">
                <!-- STATIC CONTENT -->
        </div>
        <div class="span6">
                <!-- STATIC CONTENT -->
        </div>
    </div>
    <div id="section2" class="row-fluid fill-height">
                <!-- STATIC CONTENT -->
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

html, body
{
  height: 100%;
}

body{
    background-color:#fafafa;
    color:#5b5b5b;
    min-width:0;
}

header, footer {
    height: 13%;
}

.container-fluid {
    padding: 0;
    min-height:83%;
    height: 83%;
    overflow: hidden;
}

.fill-height{
    height:100%;
}

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap-2

D-M*_*-Mx

2017 05-23

6
推荐指数

1
解决办法

2820
查看次数

SimpleModal 和 Bootstrap 模式之间的冲突

我将这两个插件都包含在同一页面中，这会导致它们之间发生冲突。

我删除了 Bootstrap.min.js 并且 SimpleModal 工作正常。我删除了 jquery.simplemodal.js 并且 Bootstrap 模态工作正常。如果在 bootstrap.min.js 之前包含 jquery.simplemodal.js，我尝试调用 bootstrap modal

如果在 Bootstrap 之后包含 SimpleModal，我会在 Firebug 控制台上收到此错误

i.modal(...).one is not a function **..blah blah..** bootstrap.min.js (line 6)

Run Code Online (Sandbox Code Playgroud)

jquery simplemodal twitter-bootstrap bootstrap-modal twitter-bootstrap-2

vin*_*vin

2014 07-24

6
推荐指数

2
解决办法

9738
查看次数

如何更改click事件上的bootstrap插入符指向方向

我正在使用2.3.2 bootstrap

当我单击菜单按钮时,我可以更改插入符号图标的位置.

当我点击指向上方的图标插入符号时,我需要它,当你点击另一个项目时,插入符号回到初始状态.

这怎么可能？

导航代码

<div id="navi">
    <div class="container">
      <nav>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="row">
              <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <div class="span2">
                <a class="brand" href="#"></a>
              </div>

              <div class="span10">
                <div class="nav-collapse collapse">
                  <div class="row">
                    <div class="span8">
                      <ul class="nav">
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lorem 3 opes<b class="caret"></b></i></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li>
                            <li><a href="institucional.html">Olosmpa</a></li>
                            <li><a href="#">Lorem 2 isum</a></li>

                          </ul>
                        </li>

                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lorem mas<b class="caret"></b></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li> …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery twitter-bootstrap twitter-bootstrap-2

cha*_*alo

2014 08-19

6
推荐指数

2
解决办法

2万
查看次数

阻止大显示设置时,Bootstrap缩略图搞砸了

使用Bootstrap 2.3.2我使用以下解决方案阻止我的页面适应大显示设置:

@media (min-width:970px) and (max-width: 2500px) {
    .container {
        width: 970px;
    }   
}

Run Code Online (Sandbox Code Playgroud)

...在我创建缩略图之前一直工作正常:

<div class="container frame">
    <h3>grid problems above 1200px</h3>
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail">Thumbnail #1</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #2</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #3</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #4</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #5</div>
        </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

连续有三个缩略图,但是当我拉动浏览器窗口超过1200px时,缩略图会重新排列,并且只有两个按行排列.

我怎么解决这个问题？

我是否需要重新定义所有这些引导.span标签？

这是我的小提琴:https://jsfiddle.net/michi001/b7n1byvx/

css css3 twitter-bootstrap-2

mic*_*chi

2016 02-25

6
推荐指数

1
解决办法

238
查看次数