标签: twitter-bootstrap

我有一个导航栏，其中有一个名为 A 的主下拉 li 标签，然后当我显示下拉菜单时，它显示 A-1 和 A-2 选项，A-2 这是另一个带有其他选项的下拉菜单，我尝试复制相同的代码，就像 if 是 a主要下拉菜单但无法正常工作，我这里有代码

但是下面是代码。

$(document).ready(function () {
  console.log("Hi...");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-static-top" id="Nav">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">APBPV</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">A <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a …

我正在尝试使用 glyphicon 中的 glyphicon，当您单击一个 glyphicon 时，它会说您需要做的就是<span class="glyphicons glyphicons-*name of glyphicon*"></span>在您想要 glyphicon 的位置添加。但在下载它们后，我注意到它们都保存为 .png 文件，有谁知道如何实际从 glyphicon.com 获取 glyphicon 到引导项目中？

我想将 inline-flex 容器放在父 div 内居中，但设置margin:auto不会执行任何操作，即使父 div 比 flex 容器宽。（从结果中可以看出）

将 justify-content 设置为 center 不会给出想要的结果。

我尝试在 css 中设置display:inline-flex来查看是否是 Bootstrap 问题，但没有成功。

我设置了背景颜色来可视化对象。

网页：

<div class="d-none d-md-block" style="background-color:blue;">
    <div class="d-inline-flex flex-wrap lc-product-thumb-wrap">
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-0" />
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-1" />
        <img src="demo2.png" class="lc-product-thumb-img" id="thumb-2" />
    </div>
</div>

CSS：

.lc-product-thumb-wrap {
  background-color: pink;
  margin: auto;
}

.lc-product-thumb-wrap .lc-product-thumb-img {
  width: 98px;
  margin: 2px;
  padding: 4px;
  border: 1px solid #003c02;
  background-color: #dafac1;
}

结果：

我想在我的网站上使用 bootstrap。首先，我将CDN放入头部，一切都很好。然后我不想通过CDN应用bootstrap，所以我下载了bootstrap文件，并将CSS部分放在.js文件中<style>，将js部分放在<script>. 但没有成功，为什么呢？

这是 CDN 代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

参考：BootStrap 徽章。

默认情况下，项目根据逗号分割。但是，按 Enter 键后，我需要将每个项目放在新行上。

目前，我的屏幕左侧有一个 Bootstrap 侧边栏。height被设定为100%。但是，当内容超出屏幕底部时，它就无法滚动。

我看到这个 Stack Overflow问题与我的问题非常相似。其中一条评论提到这可能是因为我的身高被设置为 100%。

我尝试将高度设置为 100px，只是为了测试内容是否可以滚动，结果很有效。

所以我的问题是，有没有办法使侧边栏中的内容可滚动并保持高度，而100%不必设置特定的像素值？

编辑：

下面是我当前的 CSS #sidebar-wrapper。

#sidebar-wrapper {
    overflow-y: scroll;
    z-index: 1000;
    position: fixed;
    left: 175px;
    width: 175px;
    height: 100%;
    margin-left: -175px;
    overflow-y: auto;
    background: #222222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我有一个表单，我使用 col-md-6 将表单分成两列，因此一半字段位于左侧，另一半位于右侧。现在我想做的是将左侧的所有字段都放在右侧，这样就没有多余的空间，并且表单看起来更居中。

这是我的代码：

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
	<div class="form-group">
		<label class="control-label col-sm-2" for="first_name">Firstname:</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="first_name"
				placeholder="First Name" name="first_name">
		</div>
	</div>
	<div class="form-group">
		<label class="control-label col-sm-2" for="last_name">Lastname:</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="last_name"
				placeholder="Last Name" name="last_name">
		</div>
	</div>
	<div class="form-group">
		<label class="control-label col-sm-2" for="email">Email:</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="email"
				placeholder="Email" name="email">
		</div>
	</div>
	<div class="form-group">
		<label class="control-label col-sm-2" for="address1">Address
			Line 1:</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="address1"
				placeholder="Address Line 1" …

我有一个视图，其中包含一组选项卡，每个选项卡呈现不同的部分视图。阅读这些引导选项卡的文档和 W3Schools 示例后，我无法找到一种方法使活动选项卡在回发时保持活动状态。我见过的所有示例都使用旧版本的 .Net，并且也不适用。

这是我的代码。
我的控制器动作：

public IActionResult DisplayCharts(DashboardChartsByMonthModel model)
{
        //...do stuff
        model.MonthOrQuarterChart = monthChart;
        model.UserChart = userChart;
        return View(model);
}

在视图@Scripts部分中：

<script>
   $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav a[href="' + hash + '"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop() || $('html').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });
</script>
<script>
    $('a[data-toggle="tab"]').on('shown.bs.tab',
        function(e) {
            switch ($(e.target).attr('href')) {
            case '#tab1':
                drawMonthAndQuarterChart();
                break;

            case '#tab2':
                    drawUserChart();
                break;

            }
        });
</script>

体内：

<ul class="nav nav-tabs" role="tablist" …

我正在尝试使用带有复选框的下拉菜单？我该如何继续？下面是我正在尝试的 Html 片段。

<div class="form-group col-lg-3">
    <div *ngFor="let option of options">
        <select>
            <input type="checkbox" name="options" value="{{option.value}}" [(ngModel)]="option.checked" /> {{option.name}}
        </select>
    </div>
</div>

注意：我自己提问和回答，因为我花了 3 天尝试不同的方法来找到解决方案，希望这对某人有帮助。这个问题以前曾被问过，但它们已经过时了，而且答案不清楚或不令人满意。

在使用具有浮动的元素打印时尝试添加分页符（例如：使用引导网格）不起作用。分页符被忽略。

<div style="float:right;">floating div</div>

<div class="col-xs-12">
  <div class="row">
    <div class="col-xs-12 break-after">
      Add page break after this element when printing
    </div>
    <div class="col-xs-12">
      This should be printed on next page
    </div>
  </div>
</div>

<style type="text/css">
.break-after {
  page-break-after: always;
}
</style>