个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有一个 html文件，在 Firefox 中显示为: 
问题是，我想将所有内容都放在一个水平行中并排放置:
Dropdown ,nav-pills菜单和 我的代码是(jsfiddle:https://jsfiddle.net/aq9Laaew/162055/):
$(document).ready(function() {
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`);
}
$('header a').first().addClass('active');
$('header a').click(function() {
console.log($(this).data('value'));
});
});<meta charset='utf-8' />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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>
<body>
<header>
<div class="form-group">
<label for="dd1">Dropdown:</label>
<select class="form-control" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<ul></ul>
<a href="#">Seperate Link</a>
</header>
</body>
</html>我试过了
style="display:inline-block"至 <div> , <ul>和 <a>元素bootstrap grid如 https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp 中所述但到目前为止没有任何效果。
最佳答案
使用class="row"包裹div，将divs包裹在col-*中
在这里学习:https://getbootstrap.com/docs/4.0/layout/grid/
$(document).ready( function(){
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`
);
}
$('header a').first().addClass('active');
$('header a').click(function(){
console.log($(this).data('value'));
});
}); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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>
<header>
<div class="row">
<div class="form-group col-5">
<label for="dd1 col-form-label" >Dropdown:</label>
<select class="form-control d-inline-block col-8" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<div class="col-7 d-flex">
<div class="col-9 p-0">
<ul></ul>
</div>
<div class="col-3 pt-2">
<a href="#">Link</a>
</div>
</div>
</div>
</header>关于css - bootstrap 4 : dropdown, nav-pills 和水平线中的单独链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51926503/
25
4
0
我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div，并且工作正常。但是当我试图构建第二个 div 时，第一个 div
这个问题在这里已经有了答案: Nested tabs in bootstrap (3 个答案) 关闭 3 年前。
所以我有一些垂直的药丸，它们有一个 :after class 在药丸的末端创建一个三 Angular 形: .nav-link.active :after { position: absolu
我想用下拉菜单创建 Angular 药丸。我已经做到了这一点，但问题是只有 span 或 a 是可点击的，而不是药丸的其余部分。但是，如果我单击药丸，它仍会突出显示药丸，但不会执行单击它时必须执行的任
我想在我的网站上使用导航丸，但它们会导致后台泄漏。在本站看效果:http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitablev
我可以折叠默认导航栏的链接，但我不想使用默认导航栏。我想要 nav pills，对于较小的屏幕，pills 下的链接应该折叠起来。对于较小的屏幕，我的 nav pills 数据不会折叠。这是我的代码:
与药丸内容相比，侧边栏有些不对劲。这段代码的结果基本上是 被推到药丸标签旁边的左上角，而药丸内容全部散布在它下面并固定在左侧。我已经尝试了很多 CSS 技巧(边距、宽度等)，但似乎没有任何东西可以将其
我似乎无法让我的药丸在小屏幕上发挥作用。他们可以在普通屏幕上很好地标记内容，但是一旦我把屏幕变小，这些药丸就无法点击了。 不知道是什么问题 此外，如果我只有药片，它会弹跳，但一旦它在容器中，它就不会弹
下面有一个导航药丸示例，其中有一个导航药丸，并且事件选项卡根据所选选项卡进行切换，效果很好。然而，该链接会将浏览器发送到另一个页面。我希望将有效药丸设置为与离开时相同的药丸。我已经设置了 sessio
我想用下划线替换要渲染的 boostrap pills。1) 因此，事件的“苹果树”将在其背景上显示没有药丸。取而代之的是，文本将被加粗，并且文本下方将有一个 3px 实心下划线(颜色#e9a39c)
我正在使用 Bootstrap Pills 作为菜单，顶部有一个空间。我已经为 删除了间距但我不知道如何摆脱第一个 顶部的空间. .nav-pills > li > a {
我正在使用 bootstrap 开发一个元素。我刚刚在 pills navbar 中添加了一个子菜单，但它不起作用。当我点击消息时没有任何反应 Home Home About I
我正在使用 bootstrap 的 pill 导航栏，出于某种原因，一旦我添加了我的代码，其中包含提供 netflix 感觉的图 block (在 STEMuli 选项卡上)，当转到另一个选项卡时，导
我正在使用 HTML 构建我自己的 Pill 组件: .panel1 { width: 100%; } .panel2 { width: 100px; } .pill { display:
我已经尝试使用 nav-pills(来自 bootstrap 3.2.0)，但它似乎对我不起作用。这是我的 HTML 代码:
早上好， 不太擅长网络，因此感谢您对我的以下问题的帮助。 在这里，我使用 Bootstrap 药丸而不是选项卡来显示可切换 View 。这在网页中工作，并在单击每个药丸时显示页面。 请检查一下。
我在代码中使用 Bootstrap 药丸，但现在我想在单击药丸时执行另一个操作。但没有一个事件处理程序能够捕获单击事件，任何帮助表示赞赏。谢谢 我已经在 a 标签和父标签上添加了点击事件，我还添加了用
是否可以使用粗下划线渲染 bootstrap navigation pills，与标签文本设置宽度一样宽，如此处所示？ 最佳答案 您可以为您的导航栏使用以下样式属性 Jsfidlle with nav
是否可以使用粗下划线渲染 bootstrap navigation pills，与标签文本设置宽度一样宽，如此处所示？ 最佳答案 您可以为您的导航栏使用以下样式属性 Jsfidlle with nav
我正在尝试使用 Bootstrap 中的 Dropdown UI 元素设置 Pill，但当我单击插入符号时它没有显示下拉菜单。我查看了 Bootstrap 文档及其来源)，但没有找到我遗漏的内容。 我
我是一名优秀的程序员,十分优秀！