那些遇到过的问题

标签: bootstrap-4

jQuery - "fadeIn不是函数"

遇到一个非常奇怪的问题.试图运行,fadeIn()但我收到错误".fadeIn不是一个函数".

我的代码:

body {
  display:none;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>
    Test

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $('body').fadeIn();
      })
    </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

错误信息:

"TypeError: $('body').fadeIn is not a function. …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery twitter-bootstrap bootstrap-4

use*_*717
2017 08-12
25
推荐指数
2
解决办法
2万
查看次数

Bootstrap 4更改断点

我有一个应用程序,其中设计需要从桌面到平板电脑的1280断点,或者xl到lg.但是,Bootstrap本身的xl断点为1200.

我需要为引导程序全局更改xl断点.我是否必须从源文件重新编译Bootstrap 4？

我尝试使用我的Sass构建设置:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);
Run Code Online (Sandbox Code Playgroud)

但是,xl全局的断点没有任何改变,它仍然会在1200px宽度处进行中断.

css sass responsive-design twitter-bootstrap bootstrap-4

smb*_*smb
2018 06-01
25
推荐指数
3
解决办法
2万
查看次数

Bootstrap 4:响应侧边栏菜单到顶部导航栏

所以我一直在寻找和寻找指导,但没有用.

基本上,我只想要一个侧边栏,但是当屏幕变小时,即智能手机的屏幕尺寸,它会转换为导航栏.

我的侧边栏HTML代码是这样的:

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

我的CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}
Run Code Online (Sandbox Code Playgroud)

我不知道如何将其导入导航栏.我所知道的是如何从头开始制作导航栏,但我不希望这样!我不想要任何那种花哨的动画叠加多色手风琴 - 无论如何,请 -

谢谢 :)

html css responsive-design twitter-bootstrap bootstrap-4

daw*_*awn
2018 02-22
25
推荐指数
1
解决办法
12万
查看次数

在标题内垂直对齐Bootstrap徽章

当我使用一个自举badge标题,如内部h1,h2,h3垂直取向是关闭的.在badge对标题文本的对齐底部.我希望徽章垂直对齐标题文本.

HTML

<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>
Run Code Online (Sandbox Code Playgroud)

CSS

h1,h2,h3 {
  vertical-align:middle;
}

h1>.badge, h2>.badge, h3>.badge {
  vertical-align:middle;
}
Run Code Online (Sandbox Code Playgroud)

结果 ..

请参阅此Bootply:http://bootply.com/88526

在此输入图像描述

如何让它在垂直中心对齐？

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

Zim*_*Zim
2018 04-23
24
推荐指数
2
解决办法
2万
查看次数

Bootstrap 3下拉菜单中心对齐不起作用

我无法将下拉列表与悬停下拉列表的父级中心对齐.我试过text-align:center为整个.nav .navbar li元素,但它不起作用.我试图设置保证金和左:50%的整个ul.dropdown菜单是下拉列表,但它不起作用.这是html代码:

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我应该在哪个类下拉菜单或nav navbar-nav中进行对齐,我应该设置什么？

html css twitter-bootstrap drop-down-menu bootstrap-4

Mat*_*ija
2019 03-04
24
推荐指数
3
解决办法
3万
查看次数

Bootstrap 4中心区无法居中

我有以下bootstrap html代码(它的JSX因此,className但想法是相同的):

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
        <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
        <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
 </div>
Run Code Online (Sandbox Code Playgroud)

我试图将这个代码集中在bootstrap center-block或CSS中,但似乎无法让它工作:

在此输入图像描述

绿色条突出显示div toggleView.

我使用的唯一的CSS是以下:

.toggleView {
    padding: 20px;
}
Run Code Online (Sandbox Code Playgroud)

为什么我不能将此按钮组居中？

html css twitter-bootstrap bootstrap-4

Apa*_*ear
2018 07-15
24
推荐指数
3
解决办法
6万
查看次数

不兼容的单位:'rem'和'px' - Bootstrap 4和Laravel Mix

我刚刚安装了一个新的Laravel 5.4和bootstrap 4 alpha 6. Laravel mix不会编译SASS:这是一个错误:

    Module build failed: ModuleBuildError: Module build failed: 
$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
                                ^
      Incompatible units: 'rem' and 'px'.
      in /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/bootstrap/scss/_variables.scss (line 444, column 34)
    at runLoaders (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/webpack/lib/NormalModule.js:192:19)
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/lib/loader.js:57:13)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:2262:31)
    at apply (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
    at Object.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:944:16)
    at options.error (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/node-sass/lib/index.js:294:32)

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Run Code Online (Sandbox Code Playgroud)

有人通过了吗？如何？

laravel bootstrap-sass webpack bootstrap-4

Nic*_*sîr
lucky-day
24
推荐指数
4
解决办法
2万
查看次数

Bootstrap 4,如何使col高度为100%？

如何使列占据浏览器w引导4的100%高度？

请参阅以下内容:https://codepen.io/johnpickly/pen/dRqxjV

注意黄色div,我需要这个div /列占据100%的高度...有没有办法让这个发生而不必让所有父div的高度为100%？

谢谢

HTML:

<div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

css3 grid-layout twitter-bootstrap twitter-bootstrap-4 bootstrap-4

Ann*_*aSm
2017 07-12
24
推荐指数
3
解决办法
8万
查看次数

使用图标Bootstrap 4搜索输入

不知道我怎么能这样做,因为BS 4不支持glyphicons.我是将其设置为背景还是将不同的定位应用于字体真棒图标？

到目前为止这是我的代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->
Run Code Online (Sandbox Code Playgroud)

我想使用这个字体很棒的图标.我也尝试过添加它background-image,如:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}
Run Code Online (Sandbox Code Playgroud)

但这没有任何作用.我能想到的唯一方法是添加font-awesome图标,然后将定位设置为绝对,对吧？但我不确定这是否是"干净"和正确的方法呢？我需要采取不同的方法吗？有人帮忙!谢谢!

css twitter-bootstrap font-awesome bootstrap-4

Ret*_*ros
2018 11-13
24
推荐指数
1
解决办法
8万
查看次数

使用 Crispy Forms 时 Django 返回“TemplateDoesNotExist”

TemplateDoesNotExist将 Crispy Forms 与 Django 结合使用，只有在使用 Crispy Forms 的任何功能时才会出现错误。

由于我是 Crispy Forms 的新手（似乎普遍建议使用它来快速使表单看起来更好），因此我按照https://django-crispy-forms.readthedocs.io/en/latest/install.html中的说明进行操作据我所知，安装是正确的（使用安装pip并更改settings.py）。.venv我在 Windows 计算机上的虚拟环境（下面提到的文件夹）中运行它。

我什至专门创建了一个新项目来研究这个问题，内容绝对很少，但同样的问题仍然存在。该项目称为“stuff”，其中的单个应用程序称为“other”。

设置.py

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
    'other',
    'bootstrap4'
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

...
Run Code Online (Sandbox Code Playgroud)

模型.py

from django.db import models

class Mine(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
Run Code Online (Sandbox Code Playgroud)

表格.py

from django import forms
from .models import Mine

class MineForm(forms.ModelForm):
    class Meta:
        model = Mine
        fields = ('name','email')
Run Code Online (Sandbox Code Playgroud)

视图.py

from django.shortcuts …
Run Code Online (Sandbox Code Playgroud)

django django-crispy-forms bootstrap-4

Dav*_*ave
2023 02-20
24
推荐指数
2
解决办法
2万
查看次数

标签 统计

bootstrap-4 ×10

twitter-bootstrap ×8

css ×7

html ×3

responsive-design ×2

bootstrap-sass ×1

css3 ×1

django ×1

django-crispy-forms ×1

drop-down-menu ×1

font-awesome ×1

grid-layout ×1

javascript ×1

jquery ×1

laravel ×1

sass ×1

twitter-bootstrap-3 ×1

twitter-bootstrap-4 ×1

webpack ×1