那些遇到过的问题

小编van*_*ren的帖子

如何从bootstrap导航栏中删除border-bottom

我意识到这个问题的解决方案对某些人有用,但我尽可能地尝试,我无法删除这个烦人的边界.

我试过以下CSS:

.nav-container{
    border-width:0;
    box-shadow:none;
    background-color: aliceblue;
}
.navbar {
    background-color: #99ccff; 
    border: 0;
}
Run Code Online (Sandbox Code Playgroud)

虽然背景颜色确实已设置,但边框仍然存在.

这是网站.

index.html的:

html,
body {
  background-color: aliceblue;
}
.nav-container {
  border-width: 0;
  box-shadow: none;
  background-color: aliceblue;
}
.navbar {
  background-color: #99ccff;
  border: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid nav-container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

ron*_*mbe
2016 07-26
7
推荐指数
1
解决办法
2万
查看次数

Bootstrap 切换按钮不起作用

切换按钮无法显示折叠的元素，我不知道为什么。调整窗口大小时，会显示切换按钮，但按下后不会发生任何情况。这是我第一次使用 Bootstrap，所以我可能犯了一些非常明显和可笑的错误。任何帮助表示赞赏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container"></div>

      <li>
        <a class="logo" href="#1"></a>
      </li>
      <li>
        <a class="cart" href="#7"></a>
      </li>

      <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">

        <ul>

          <li class="products"><a href="#2">Products</a>
          </li>
          <li class="store"><a href="#3">Store</a>
          </li>
          <li class="about"><a href="#4">About Us</a>
          </li>
          <li class="discover"><a href="#5">Discover</a>
          </li>
          <li class="support"><a href="#6">Support</a>
          </li>

        </ul>

      </div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

javascript jquery toggle twitter-bootstrap drop-down-menu

Lor*_*Lel
2016 11-07
5
推荐指数
1
解决办法
4万
查看次数

导航选项卡不适用于 Bootstrap 

<body>
  <!-- jQuery first, then Bootstrap JS. -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Products</a>
      <ul class="dropdown-menu">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
      </ul>

    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
Run Code Online (Sandbox Code Playgroud)

这是正文部分中的代码。你们能帮我弄清楚出了什么问题吗？我无法看到水平选项卡中的内容:(

twitter-bootstrap twitter-bootstrap-3

rvc*_*rvc
2016 08-10
4
推荐指数
1
解决办法
2万
查看次数

引导程序：Col-md-3不是从新行的左边开始

如何使col-md-3从左开始在新行上。看起来它自动适合自己，具体取决于文本大小。

在此处输入图片说明

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section id="services">
  <div class="container">
    <div class="row">

      <div class="col-md-12">
        <h1 class="text-center">Services</h1>
        <h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
        <h4>We are here to help you at each and …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

Pho*_*nix
2017 01-13
4
推荐指数
1
解决办法
3733
查看次数

Bootstrap输入100%宽度不起作用

我正在构建一个测试项目,只是为了让自己对Bootstrap更加熟悉,但是我遇到了输入大小的问题.

我在div标签内放置了一个简单的文本输入对象,该对象的宽度自动设置为100%宽度.但是,div已被设置为显示半屏宽度或全屏宽度(取决于浏览器大小),但无论文本框的宽度是多少都不会超过280px.它会比这更小,但从不宽.

我已经检查过并且可以确认此框的父对象是正确的宽度,但由于某种原因,该框拒绝填充它.有谁知道为什么会发生这种情况？我正在使用的代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="txt_Address1">Address 1</label>
      <input type="text" class="form-control" id="txt_Address1" />
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

谢谢

html css twitter-bootstrap

Jam*_*eel
2016 06-07
3
推荐指数
1
解决办法
2075
查看次数

CSS Bootstrap:出现水平滚动条

我正在尝试一个小项目的Bootstrap,但有一些我不明白或我应该做错.这是我的片段:

nav{
  background-color: lightblue;
}
section{
  background-color: lightgreen;
  }
Run Code Online (Sandbox Code Playgroud) 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

出现水平滚动条,如何在不添加外部css规则的情况下正确修复它,仅使用Bootstrap？

css twitter-bootstrap twitter-bootstrap-3

Al *_* ѫ
2016 12-23
3
推荐指数
1
解决办法
3909
查看次数

使 Bootstrap Collapse 上的面板标题可单击

我正在尝试解决我网站上的这个小问题。我正在使用 Bootstrap 手风琴作为我网站的一部分。目前，只有当您单击面板标题上的文本时，才会打开选项卡。我希望能够单击面板标题并让它打开隐藏内容，而不是文本作为打开隐藏内容的按钮。但我不知道该怎么做。有人知道怎么做吗？

http://codepen.io/aahmed2/pen/yOQvVz

提前致谢！

这是我试图修复的部分（我无法让它看起来像这里的代码，所以请访问我提供给 Codepen 的链接） 

<div class="panel panel-default col-md-4">
  <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
    <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <h2>Bites and Stings</h2>
    </a>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
      <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
      <a href="#"><h4>Bees and Wasps</h4></a>
      <a href="#"><h4>Animal Bites</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading pet-health" role="tab" id="headingTwo">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <h2>Pet Health and Safety</h2>
    </a>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

Abb*_*bey
2016 07-21
2
推荐指数
1
解决办法
5211
查看次数

尝试将自举程序按钮带到该部分的右下角，但是却将其带到了该部分之外。为什么？

因此，这有点令人困惑。

.features {
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #8C8C8C;
  border-radius: 7px;
  color: #4A4A4A;
  overflow: hidden;
}
.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="features">

  <p class='new-question'>Placeholder text</p>

  <div class='row'>
    <div class='bottom-right'>

      <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
      <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>

    </div>
  </div>

</section>
Run Code Online (Sandbox Code Playgroud)

我只希望按钮在功能部分的右下方连续显示。但是他们没有这样做，而是完全超越了本节。有什么想法吗？

这就是现在的样子（忽略文本，我用js生成了它）：在此处输入图片说明

css twitter-bootstrap

Jef*_*ess
2016 06-14
1
推荐指数
1
解决办法
5272
查看次数

Multiline Bootstrap-Select with height: auto

我正在使用带有多个选择框的 Bootstrap-Select 和

white-space: normal;
height: auto
Run Code Online (Sandbox Code Playgroud)

所以它变成了多行，但是height: auto在盒子里长大（我认为）底部有太多空间（用红线标记）

有机会去掉吗？

具有自动高度的选择器

片段：

white-space: normal;
height: auto
Run Code Online (Sandbox Code Playgroud) 
select[multiple],
select[size] {
  height: auto;
}
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-group {
  border-collapse: separate;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word; …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap twitter-bootstrap-3

Ste*_*Hej
2017 01-09
1
推荐指数
1
解决办法
9025
查看次数

Bootstrap Slider不显示工具提示

问题：

我正在使用Bootstrap滑块，可以在这里https://seiyria.com/bootstrap-slider/找到。使用示例8时，工具提示不会像在网站上那样显示。

最小工作示例（MWE）：

<!DOCTYPE html>
<html lang="sv">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Judgement</title>
  <!-- Bootstrap Core CSS -->
  <link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Slider -->
  <link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>

<body>

  <input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
  <script type='text/javascript'>
    $(document).ready(function() {
      $("#judgement").slider({
        tooltip: 'always'
      });
    });
  </script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

示例片段：

<!DOCTYPE html>
<html lang="sv">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, …
Run Code Online (Sandbox Code Playgroud)

javascript jquery slider twitter-bootstrap

kex*_*eam
2018 08-27
1
推荐指数
2
解决办法
2231
查看次数

更改折叠的导航栏列表背景颜色

所以，我遇到了这个问题，当我折叠导航栏（它变成切换按钮）并打开列表时，背景颜色是透明的。由于我为导航栏使用透明背景，这应该是意料之中的，但是当我打开内容时，它与屏幕上的文本重叠，并且变得凌乱和丑陋。我想将 div 的背景颜色设置为在折叠到移动版本（引导程序）时更改，有什么办法可以做到吗？

这是我的代码：

.navbar-right .dropdown-menu {
  right: 0;
  left: auto;
  top: 60px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #4f82e9;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #4f82e9;
  background-color: transparent;
}
#offcanvas .navbar-nav > li:last-child > a {
  border-bottom-color: transparent !important;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

Web*_*.98
2015 08-22
0
推荐指数
1
解决办法
6174
查看次数

标签 统计

twitter-bootstrap ×11

css ×8

javascript ×4

jquery ×4

html ×3

twitter-bootstrap-3 ×3

drop-down-menu ×1

slider ×1

toggle ×1