标签: twitter-bootstrap-3

我正在尝试使用 9 个（请不要嘲笑我的客户）按钮编写引导导航结构。

我希望前 5 个按钮位于其他 4 个按钮的顶部，并向右对齐。问题是当我将它们向右对齐时，按钮会按顺序反转。我通过创建两个不同的列表解决了这个问题，但是当屏幕变小时，它会反转它。我认为应该有一个简单的解决方案，但我找不到。您可以在以下位置查看示例：http : //www.sanderfish.nl/haptokuijpers/index.html

这是我的 HTML：

<div class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-left navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png"</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="voor-wie.html">Voor wie</a></li>
            <li><a href="psychosomatiek.html">Psychosomatiek</a></li>
            <li><a href="haptotherapie.html">Haptotherapie</a></li>
            <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
            <li><a href="vergoeding.html">Vergoeding</a></li>
            <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
            <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

这是 CSS：

@media (min-width: 768px) {

.navbar-nav { …

当我打开模态时，背景变成黑色，而不是不透明度为 0.5 或什么的。

我能做些什么来解决这个问题？我使用引导程序 3.2

这是一些CSS：

.fade.in {
opacity: 1;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: …

我有以下代码。一旦我移开光标，背景颜色就会立即变回白色。li当用户单击时如何选择元素？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
  <div id="sidebar">
    <ul class="nav list-group" style="cursor:pointer;">
      <li class="active">
        <a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
      </li>
      <li>
        <a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
      </li>
    </ul>
  </div>
</div>

我正在尝试做这个例子http://jsfiddle.net/pmrotule/w7aakdbb/54/

在那里我得到了这个例外

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“fn”。和 0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法 'multiselect' 。此时在 bootstarp-multiselect.js 中抛出错误

$.fn.multiselect = function(option, parameter, extraOptions) {
    return this.each(function() {
        var data = $(this).data('multiselect');
        var options = typeof option === 'object' && option;

        // Initialize the multiselect.
        if (!data) {
            data = new Multiselect(this, options);
            $(this).data('multiselect', data);
        }

        // Call multiselect method.
        if (typeof option === 'string') {
            data[option](parameter, extraOptions);

            if (option === 'destroy') {
                $(this).data('multiselect', false);
            }
        }
    });
};

我的 HTML 代码：

<script src="~/Scripts/bootstrap-multiselect.js"></script> …

我正在使用 twitter bootstrap 3.3，我想在移动或平板电脑模式下隐藏某些列。

在移动设备或平板电脑中，是否有可用于隐藏列的特定类。

例如

<td class="mobile-hidden tablet-hidden">blah</td>

我有 3 个按钮，单击时会折叠并显示一个表单。我想要的是，如果一个已经折叠，那么如果单击另一个，我希望它再次隐藏。

我的小提琴：https : //jsfiddle.net/77soggnv/

这是我的js代码：

$(document).ready(function(){

    //See which panel has been clicked
    $("#citizen").click(function(){
        $(this).data('clicked', true);
    });
    $("#organisation").click(function(){
        $(this).data('clicked', true);
    });
    $("#anonymous").click(function(){
        $(this).data('clicked', true);
    });

    //Hide the other panels if one is clicked
    if($("#citizen").data('clicked')){
        $("#organisation").collapse("hide");
        $("#anonymous").collapse("hide");
    }
    if($("#organisation").data('clicked')){
        $("#citizen").collapse("hide");
        $("#anonymous").collapse("hide");
    }
    if($("#anonymous").data('clicked')){
        $("#organisation").collapse("hide");
        $("#citizen").collapse("hide");
    }    

});

我正在尝试使用背景颜色来填充引导程序中子 div 中的整个 div，但我完全卡住了。我希望正确的部分是黄色的，但它只是突出显示了 div 中的文本。

这是一个小提琴。

我知道我错过了一些非常明显的东西，但是我如何让黄色填满整个col-lg-6div？

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}

.yellow {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="new" class="new-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>Section left</h1>
      </div>
      <div class="col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>

怎么了

我想要的是

如您所见，Amy 灰色框和矩形灰色框并未将自己定位在同一行上。考虑到我的代码使用 Bootstrap col sys 将两个灰色框放在同一行上，这很奇怪。

我的 cols 加起来是 12，所以我不确定发生了什么。但是，我确实注意到，如果我让 cols 加起来为 11，那么两个灰色框都会放在同一行上。但这不是我想要的修复，因为我希望我的 cols 加起来为 12 并且两个框都出现在同一行上。

如果有人能帮我解决这个问题，将不胜感激！

我的代码

HTML

<div class="row student-row">
     <div class="col-xs-2 student-box"> 
          <h1>Amy</h1>
    </div>
    <div class="col-xs-10 worksheet-box">
          ...
    </div>
</div>

CSS

.student-row{
    margin: 20px 10px 10px 10px;
}

.student-box{
    margin-right: 10px;
}

.worksheet-cell{
    margin-top: 10px;
    margin-left: 10px;
    width: 20%;
}

.worksheet-group{
    margin: 10px 15px 20px 15px;
}

JSFiddle

我正在使用https://eonasdan.github.io/bootstrap-datetimepicker/是否可以配置为使用 24 小时格式？

现在我像这样使用它，但它不是我需要的

$('.dayWorkTime').datetimepicker({
    format: 'LT' 
});

嗨，我使用 codeigniter 和 bootstrap 开发了一个网站，我在我的管理页面中上传了 youtube url，并使用 iframe 在我的视图页面中获取该 url 并加载该 url。但是youtube视频没有显示当我检查网站时，错误显示如下

拒绝在框架中显示“ https://www.youtube.com/watch?v=7Ct59FQIbAU ”，因为它将“X-Frame-Options”设置为“sameorigin”。广告：522 GET https://www.youtube.com/watch?v=7Ct59FQIbAU net::ERR_BLOCKED_BY_RESPONSE

当我检查这个网站时，网址显示但视频没有显示..这是那个网站网址 www.clicx.in/pixelerror

在我的本地服务器中它的工作

视图代码是

<div class="container">
<div class="row">
<?php foreach($advertisement as $ad) { ?>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="<?php echo $ad->url?>"></iframe>
</div> 
<?php }?>
    </div>  
</div>