标签: twitter-bootstrap

我尝试使用background-size: cover和将背景图像置于 div 中心background-size: contain，但它不起作用。我需要在 HTML 标签内显示背景图像并在 css 文件中使用背景大小，这是代码：

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    margin-left: 20px;
    display: inline-block;
}
.main{
    border: 1px solid black;
    background-color: #A6A6A6;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid white;
}
.card div {
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    position: absolute;
}
.card .front {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: …

我不确定我的加载顺序是否正确。有人能确定是吗？

在“头”中：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

在“正文”中：

<script src="js/bootstrap.js"</script>
<script src="js/jquery-3.2.1.min.js"</script>
<script src="js/jquery-slim.min.js"</script>
<script src="js/popper.min.js"</script>
<script src="js/custom.js"></script>

我有一个带有 Bootstrap 的 Rails 5 应用程序，我用纱线安装了它。我做了以下事情：

yarn add bootstrap

bootstrap@^3.3.7:
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"

在 application.css 上

 *= require bootstrap/dist/css/bootstrap

在 application.js 上

//= require bootstrap/dist/js/bootstrap
//= require rails-ujs
//= require @fnando/sparkline/dist/sparkline
//= require_tree .

关于资产.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.paths << Rails.root.join('node_modules/bootstrap/dist/fonts')
Rails.application.config.assets.precompile << %r{node_modules/bootstrap/dist/fonts/[\w-]+\.(?:eot|svg|ttf|woff2?)$}

尽管如此，当我在生产环境（Heroku）上访问它时，我得到了

ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

我$icon-font-path: "node_modules/bootstrap/dist/fonts";也尝试添加到我的 scss 中，但这也不起作用

我对 CSS 还很陌生，所以如果之前有人问过这个效果，我很抱歉，我不知道它的名字。

我需要创建这个（图1），我目前有这个（图2）： 我不知道如何创建这种效果，也不知道它的名字是什么。我尝试过使用 z-index 和 padding，但我认为这不是最好的解决方案。

代码如下（图2）：

<div class="row text-center">
    <div class="col-lg-4">
        <div class="card" style="width: 20rem;">
            <img class="card-img-top" src="picture.png" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Mirion Jones</h4>
                <p class="card-position">CEO Founder</p>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

我正在使用 Bootstrap 4。

我试图在引导选项卡上实现类似的“箭头”样式，类似于下面的屏幕截图。我怎样才能实现类似的目标？

我在 jsfiddle 中有我的示例代码，我在其中使用了引导选项卡。

https://jsfiddle.net/70Luf7hu/

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
    <li role="presentation">
        <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>

  </div>

</div>

我不知道如何使用 Bootstrap 4，以及如何在一张幻灯片中显示多个小图像 \xe2\x80\x93（如缩略图\xe2\x80\x93），而不是让图像填充轮播的宽度。我已经使用下面的代码尝试了一些操作，但仍然无法堆叠许多图像。

<div class="container">\n    <h2 class="text-center">- Carousel -</h2><br>\n\n    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">\n        <div class="carousel-inner">\n            <div class="carousel-item active">\n                <img src="http://via.placeholder.com/250x250" alt="First slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Second slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Third slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Fourth slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Fifth slide">\n            </div>\n            <div class="carousel-item">\n                <img src="http://via.placeholder.com/250x250" alt="Sixth slide">\n            </div>\n        </div>\n\n        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">\n            <span class="carousel-control-prev-icon" aria-hidden="true"></span>\n            <span class="sr-only">Previous</span>\n        </a>\n        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">\n            <span class="carousel-control-next-icon" …

我正在使用 Bootstrap 4 选项卡导航来查看选项卡面板内的不同滑块。

它适用于活动选项卡。但非活动选项卡中的滑块的宽度为 0 ( .slide-track)。因此，在我开始浏览选项卡之前，会出现显示问题。之后，宽度被设置并且滑块看起来不错。

有什么办法可以将滑轨的宽度设置为正确的大小吗？

$('.slider-home').slick({
  dots: true,
  arrows: true,
});

$('.slider-profile').slick({
  dots: true,
  arrows: true,
});

$('.slider-contact').slick({
  dots: true,
  arrows: true,
});

.slick-prev:before,
.slick-next:before {
  color: blue;
}

.tab-pane {
  padding: 2rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
    <li class="nav-item"><a class="nav-link" …

我正在尝试创建一个多选列表，看起来像这样

这是我的 HTML：

<select multiple="multiple" id="months">
    <option value="1">January</option>
    <option value="12">December</option>
</select>

这是我的 JavaScript：

$(document).ready(function () {
    $('#months').multiselect();
});

我从代码中得到的视图似乎很好：

但是，当我点击它时，下拉列表不会出来！可能是什么原因？我正在使用以下插件Bootstrap Multiselect

我正在使用 Google 图表来可视化我的数据，并且使用 3d 饼图在引导模式中显示数据，但该值超出了我在 google 上搜索的饼图，但注意到了这个问题

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="chart" id="chart_div"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

我的 jsfiddle :- https://jsfiddle.net/L0pt229a/

我想删除引导表中一个单元格的边框。我尝试在该特定单元格上放置一个 id，并在我的 css 中放置：

#borderless-cell { border: 0; } 

这似乎不起作用。有任何想法吗？