标签: twitter-bootstrap

CSS - 我的 Bootstrap 选择 jQuery 插件的宽度和对齐问题

这可能是一个微不足道的做法,但我似乎无法处理它。

我正在使用 Twitter Bootstrap 3.3.6 和 jQuery 1.12.0,并且我还使用“bootstrap-select”jQuery插件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</head>

<body>
  <br>
  <div>
    <div class="panel panel-primary">
      <div class="panel-heading ">
        <center>
          <select class="selectpicker" id="headingSelect">
            <option>Item 1</option>
            <option selected>Item 2</option>
            <option>Item 3</option>
          </select>
        </center>
      </div>
      <div class="panel-body">
        <center>
          <div class="form-inline">
            <div class="form-group">
              <label class="control-label" …
Run Code Online (Sandbox Code Playgroud)

css jquery twitter-bootstrap bootstrap-select

2
推荐指数
1
解决办法
1694
查看次数

Bootstrap/DataTable - 如何设置默认页面

我正在使用https://datatables.net和 Bootstrap。

这是我用于显示数据表的代码:

<script type="text/javascript">
    $(document)
        .ready(function () {
            $('#datatable').dataTable({
                "order": [[ 0, "desc" ]],
                "page": 10
            });
        });
</script>       
Run Code Online (Sandbox Code Playgroud)

我没有问题让表运行没有问题。但是我想将默认页面更改为默认情况下不作为第一个页面。

我尝试将默认页面设置为第 10 页。我的意思是,加载表格时不显示第 1 页,而是显示为活动第 10 页。

然而我似乎不能这样做。你能帮我一下吗?

提前致谢!

html datatable jquery twitter-bootstrap

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

引导程序中对齐按钮组宽度相等的下拉菜单

使用引导程序,我试图在合理的按钮组中的按钮之一内创建一个下拉菜单。更具体地说,我希望下拉菜单列表元素与下拉切换按钮具有相同的宽度。下面的代码执行所有操作,除了下拉元素的宽度与切换按钮不同之外。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <style>
   .pull-right{
        margin-top: 7px
    } 
   </style>
</head>
<body>

<div class="container">
  <h2>Justified Button Groups</h2>
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <div class="dropdown btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony<span class="caret pull-right"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" class="btn btn-default btn-block">HTML</a></li>
    <li><a href="#" class="btn btn-default btn-block">CSS</a></li>
    <li><a href="#" class="btn btn-default btn-block">JavaScript</a></li>
    </ul>
    </div>
  </div>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap drop-down-menu

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

link_to 链接未在 Rails 中加载 javascript

在我的索引视图中,我有一个表(它使用 bootstrap 表排序 javascript 库对列进行排序)我正在使用 Rails 5。

所以现在当我点击 时 <%= link_to 'Products', products_path %>,javascript 没有加载,但是当我重新加载浏览器(ctrl + r)时,我看到表格排序开始工作。在查看 Chrome Developer 中的网络选项卡后,我可以看到这种情况发生,使用 link_to 看不到对 js 文件发出的任何请求,但当我重新加载时,js 文件可用。

我正在使用标准导轨结构

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Run Code Online (Sandbox Code Playgroud)

我的猜测是由于涡轮链接而发生了一些事情,但我无法弄清楚

jquery ruby-on-rails twitter-bootstrap turbolinks ruby-on-rails-5

2
推荐指数
1
解决办法
1370
查看次数

使 Bootstrap Collapse 上的面板标题可单击

我正在尝试解决我网站上的这个小问题。我正在使用 Bootstrap 手风琴作为我网站的一部分。目前,只有当您单击面板标题上的文本时,才会打开选项卡。我希望能够单击面板标题并让它打开隐藏内容,而不是文本作为打开隐藏内容的按钮。但我不知道该怎么做。有人知道怎么做吗?

http://codepen.io/aahmed2/pen/yOQvVz

提前致谢!

这是我试图修复的部分(我无法让它看起来像这里的代码,所以请访问我提供给 Codepen 的链接)

<div class="panel panel-default col-md-4">
  <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
    <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <h2>Bites and Stings</h2>
    </a>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
      <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
      <a href="#"><h4>Bees and Wasps</h4></a>
      <a href="#"><h4>Animal Bites</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading pet-health" role="tab" id="headingTwo">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <h2>Pet Health and Safety</h2>
    </a>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

2
推荐指数
1
解决办法
5211
查看次数

Bootstrap 3.3.6 bootstrap.min.css 中的警告和错误

从昨天开始,我收到了很多 Bootstrap 警告/错误。两天前还没有发生这种情况,所以我不确定发生了什么。以下是警告/错误:

Unknown pseudo-class or pseudo-element '-webkit-inner-spin-button'.  Ruleset ignored due to bad selector. bootstrap.min.css:5:1544
Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'.  Ruleset ignored due to bad selector. bootstrap.min.css:5:1778
Unknown property 'orphans'.  Declaration dropped. bootstrap.min.css:5:2691
Unknown property 'widows'.  Declaration dropped. bootstrap.min.css:5:2700
Unknown property '-moz-osx-font-smoothing'.  Declaration dropped. bootstrap.min.css:5:3676
Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.min.css:5:15709
Error in parsing value for 'margin-top'.  Declaration dropped. bootstrap.min.css:5:35740 …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

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

一种使 Bootstrap col-xx 列之间没有填充的方法

Bootstrap col-xx 类中定义的内容padding有时会在小屏幕上浪费空间,因此我想通过将 col-xx 与某些 css 设置嵌套来删除填充,如下所示:

<style>
div[class^=col-] > div[class^=col-] {
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4">a</div>
        <div class="col-xs-4">b</div>
        <div class="col-xs-4">c</div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我的实现看起来还好吗?直接嵌套 col-xx 是否存在潜在的样式问题?

css twitter-bootstrap

2
推荐指数
1
解决办法
4614
查看次数

关闭模态并滚动到 div

$("#contact-form").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact-section").offset().top
    }, 2000);
});
Run Code Online (Sandbox Code Playgroud)
<div class="modal fade" id="saModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>title</h3>
            </div>
            <div class="modal-body">
                text
            </div>
            <div class="modal-footer">
                <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button>
            </div>
        </div>
    </div>
</div>

<div id="contact-section">
<?php require 'contact.php'; ?>
</div>
Run Code Online (Sandbox Code Playgroud)

当我单击联系人时,引导模式按预期关闭,但没有滚动到联系人部分,为什么?

html javascript jquery twitter-bootstrap

2
推荐指数
1
解决办法
3967
查看次数

如何检测Bootstrap模式滚动条的位置?

我正在使用 JQuery 和 Bootstrap,并且正在使用 ajax 请求加载模式,因此内容将在模式内部动态加载。

我设法通过单击按钮(也在模式内)加载更多内容,但我想实现无限滚动功能。

然而,window.onscroll即使我在第一个 ajax 请求之后在模态中定义它,该函数似乎也不起作用或无法识别模态中的滚动位置。

问题:如何检测用户是否可以看到模态中的特定元素以自动加载更多内容?

javascript jquery infinite-scroll twitter-bootstrap bootstrap-modal

2
推荐指数
1
解决办法
6825
查看次数

使用 Bootstrap v4-alpha-5 合理化 .btn-group

这里提出的问题涉及 < alpha-3 中的合理按钮组。它在 alpha-5 中不起作用(我认为在 alpha-4 中也是如此)。

从我从问题列表中收集到的信息来看,它已被删除并且不会再回来。

我正在使用 SCSS 和可能的 Flexbox(如果这提供了更好的解决方案)。

我想使用切换状态单选按钮

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>
Run Code Online (Sandbox Code Playgroud)

有人能够提供解决方案吗?

buttongroup twitter-bootstrap twitter-bootstrap-4

2
推荐指数
1
解决办法
2001
查看次数