相关疑难解决方法(0)

687
推荐指数
7
解决办法
112万
查看次数

Bootstrap 4更改汉堡包Toggler颜色

我有一个bootstrap网站,Hamburger当屏幕小于992px时添加.HamBurger代码是这样的

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Run Code Online (Sandbox Code Playgroud)

有没有可能改变HamBurger按钮的颜色?

css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

88
推荐指数
9
解决办法
19万
查看次数

使用不好!在css属性中很重要

不太了解css和纯粹的Java/J2EE开发人员,但有些人如何在一些css 我无法解决的难题中受到打击

我是使用一种形式与一些Jquery的灯箱效果,其具有dividclass

<div id="contact-container"
     class="myclass"
     style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">
Run Code Online (Sandbox Code Playgroud)

在我的css文件中,我看到了以下条目

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
}
Run Code Online (Sandbox Code Playgroud)

但是当这个窗体显示为jquery弹出窗口时,它会在Mozilla中正确显示,但是在Google Chrome和IE浏览器上,盒子不能像它的某些部分那样正常显示,而是作为滚动条休息.

当我通过firebug(第一次使用:)看到它时,它向我展示了类似的东西

<div id="contact-container"
     class="myclass" 
     style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">
Run Code Online (Sandbox Code Playgroud)

对于相同的设置,IE和Mozilla没有正确使用,所以经过大量的Goggling后我做了更改 css

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
    height:380px !important;
}
Run Code Online (Sandbox Code Playgroud)

我把高度固定了 height:380px !important;

虽然这解决了我的问题,但不知道CSS我不知道这是否是正确的方法,因为我搜索高度,但它没有在任何地方定义.

如果我采取了错误的方法,请建议

html css css3

18
推荐指数
4
解决办法
9839
查看次数

如何使Bootstrap导航栏透明

我有这样bootstrap html一个navbar

<!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <!-- Navbar brand --> 

        <img class="logo" alt="Brand" src="images/1.png">
        <a class="navbar-brand" href="Homepage.jsp">Car Surgeons Vehicle Service Centre</a>
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

            <!-- Links -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="Homepage.jsp">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="AboutUs.jsp">About Us</a>
                </li>
                <li class="nav-item dropdown">
                    <a class=" nav-link dropdown-toggle" …
Run Code Online (Sandbox Code Playgroud)

html css bootstrap-4

6
推荐指数
1
解决办法
1万
查看次数

如何在Bootstrap版本4中更改链接颜色和悬停颜色?

在我的设计中,我想在特定部分更改链接和悬停颜色.我尽我所能,但我做不到.我是bootstrap的新手.如何为Bootstrap 4更改它?一个简单的代码在这里 -

<div class="card" style="max-width: 320px;">
     <div class="card-header text-center"><h3>Navigation</h3></div>
          <div class="card-block">
               <ul class="nav navbar-nav" style="font-size: 1.50em;">
                   <li><a href="#" class="nav-link">Home</a></li>
                    <li><a href="#" class="nav-link">Documents</a></li>
                    <li><a href="#" class="nav-link">Videos</a></li>
                    <li><a href="#" class="nav-link">Gallery</a></li>
                    <li><a href="#" class="nav-link">Download</a></li>
                </ul>
           </div>                   
</div>
Run Code Online (Sandbox Code Playgroud)

css hover twitter-bootstrap twitter-bootstrap-4 bootstrap-4

4
推荐指数
3
解决办法
5万
查看次数

Bootstrap 4 navbar-inverse没有颜色

最近,我决定尝试新的引导程序版本(4)。我对文件做了一切正确的操作(以下是我的html)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap 4 website</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <nav class="navbar navbar-inverse">
        <a href="#">Link1</a>
    </nav>

    <!-- JS scripts here -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

但是我的导航栏(反向导航栏)没有颜色。您见过与Bootstrap 4类似的东西吗?

html css bootstrap-4

4
推荐指数
2
解决办法
8796
查看次数

引导程序更改导航栏链接颜色

我知道这个话题已经被打死了,但是我读的没有用。我只是想将我的引导导航栏中的链接更改为白色。我知道上面有CSS,因为我可以更改字体大小,但不能更改颜色。

nav .navbar-nav li{
  color: white !important;
  font-size: 25px;
  }

<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
  <%= link_to root_path, class: 'navbar-brand' do %>
            <span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span>  <% end %>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'FAQ', faq_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'Contact', contact_path, class: 'nav-link' %> 
      </li>

    </ul>
  </div> …
Run Code Online (Sandbox Code Playgroud)

html css ruby-on-rails twitter-bootstrap bootstrap-4

3
推荐指数
2
解决办法
2万
查看次数

Bootstrap 4 更改导航链接悬停颜色

Bootstrap 4我正在使用Sass创建一个网站(scss。我遇到的问题是我的导航中的链接是灰色的,而不是我想要的蓝色。

我能找到的有关该主题的每个主题都建议覆盖导航项的样式。在我看来,这会在以后的开发过程中给你带来麻烦。因此,覆盖变量而不是样式是我的偏好,但不知何故它对我来说无法正常工作。

我已经通过推荐的方式覆盖了引导样式:

  • 创建具有颜色覆盖的 scss 文件
  • $theme-colors通过函数改变样式
  • 在文件之前导入主题文件bootstrap.scss

_theme.scss的如下:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$blue:      #0053CB;
$blue-700:  #0F2C92;
$white:     #FFFFFF;
$green:     #39CA71;
$red:       #F1453D;
$orange:    #fd7e14;
$yellow:    #FDC02F;

$gray-100:  rgba(0,0,0,.03);

$theme-colors: (
  primary: $blue,
  secondary: $white,
  light: $white,
  dark: $blue-700,
  success: $green,
  warning: $orange,
  danger: $red,
);

// Import bootstrap as last so that the variables will be overridden
@import '~bootstrap/scss/bootstrap';
Run Code Online (Sandbox Code Playgroud)

(用于导航链接)的引导代码$link-hover-color如下:

$link-color:                theme-color("primary") !default;
$link-hover-color:          darken($link-color, 15%) !default;
Run Code Online (Sandbox Code Playgroud)

问题是,我定义的主题颜色 …

themes sass twitter-bootstrap bootstrap-4

3
推荐指数
1
解决办法
4794
查看次数