标签: bootstrap-4

有什么常见的方法可以左对齐一些文本并在引导程序中对div容器中的其他文本进行右对齐？

例如

Total cost                   $42

以上总费用应为左对齐文本,42美元为右对齐文本

我刚刚切换到bootstrap 4并重新编写我的所有html和scss来处理它,我似乎无法找到如何在导航栏的右侧放置一组导航项.这是我的导航栏代码:

<nav class="navbar navbar-full navbar-dark bg-primary">
        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
        <div class="collapse navbar-toggleable-sm" id="navbarResponsive">   
            <ul class="nav navbar-nav float-md-left">
                <li class="nav-item">
                    <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
                            <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
                    <% end %>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
                    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                        <%= link_to …

我正在使用Bootstrap V4,并在控制台中记录以下错误;

错误:Bootstrap工具提示需要Tether(http://github.hubspot.com/tether/)

我试图通过安装Tether删除错误,但它没有奏效.我通过包含以下代码行'安装'Tether;

<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>

我是否正确安装了系绳？

任何人都可以帮我删除此错误？

如果您希望在我的网站上查看错误,请单击此处并加载您的控制台.

我正在测试Bootstrap响应性导航栏,我有一个演示网站.当我在桌面上调整浏览器大小时,一切正常,包括导航栏,它成为可折叠菜单,顶部有一个小图标,我可以单击该按钮查看更多菜单按钮.

但是当我从移动浏览器尝试它时(我在Android上尝试使用chrome和互联网浏览器),我没有看到响应式设计.我只能看到像网站这样的非常小的桌面版本.

谁能指出我做错了什么？

我有一个只存在表单的页面,我希望将表单放在屏幕的中心.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

该justify-content-center对齐表格水平,但我无法弄清楚如何垂直对齐.我试过使用align-items-center和align-self-center,但它不起作用.

我错过了什么？

DEMO

新的bootstrap 3 ....在我的布局中,我有:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

我希望'元素2'不要在小于col-lg屏幕上对齐.因此,只有col-lg-6有效地使用类右拉...

我怎么能实现这个目标？

这是一个小提琴:http://jsfiddle.net/thibs/Y6WPz/

谢谢

我正在开发一个注册页面,在导航栏上放置一些文本作为标题.我想给那些文本不同的颜色.为此我正在使用一个单独的CSS文件,但我想使用bootstrap的CSS文件来完成此操作.

任何人都可以在bootstrap中列出可用的颜色类吗？

在bootstrap-3中,有一个.well类,它在一个带有灰色背景颜色和一些填充的元素周围添加一个圆角边框.

<div class="well">Basic Well</div>

但是,我没有.well在bootstrap-4中找到任何类..well在bootstrap-4中是否有相同的标签？

这是我试图用Bootstrap 3旋转木马实现的效果

它不是一次只显示一帧,而是一起显示N帧.然后当您滑动(或自动滑动时),它会像幻灯片那样移动幻灯片组.

这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件......

我刚访问了这个页面http://www.elmastudio.de/,并想知道是否可以使用Bootstrap 3构建左侧边栏折叠.

从顶部折叠侧边栏的代码(仅限电话):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

补充工具栏本身具有hidden-xs类.使用以下js删除它

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

如果单击该按钮,则会从顶部切换侧边栏.很高兴看到侧边栏的行为与上面显示的网站相似.任何帮助表示赞赏!