需要对齐 bootstrap 旋转木马并使其子弹正常工作

Question

我有一个需要对齐的文本轮播，也不确定如何激活它的项目符号。

通过单击下面的演示 link，您会看到项目符号点不在页面中间，并且根据名称和文本的大小，名称和项目符号之间的距离会发生变化。

对于任何屏幕尺寸，我都需要将它们（文本、名称、项目符号）都放在页面中间。

.carousel-content {
    color: black;
    display: flex;
    align-items: center;
}

.name {
    color: black;
    display: block;
    font-size: 20px;
    text-align: center;
}

.mytext {
    border-left: medium none;
    font-size: 24px;
    font-weight: 200;
    line-height: 1.3em;
    margin-bottom: 10px;
    padding: 0 !important;
    text-align: center;
}

.bullets li {
    background: none repeat scroll 0 0 #ccc;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    float: none;
    height: 10px;
    width: 10px;
}

.bullets li:last-child {
    margin-right: 0;
}

.bullets li {
    border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <h3>#1</h3>
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#2</h3>
                            <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#3</h3>                            
                            <p>This is the third item.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

        setCarouselHeight('#carousel-example');

        function setCarouselHeight(id) {
            var slideHeight = [];
            $(id + ' .item').each(function() {
                // add all slide heights to an array
                slideHeight.push($(this).height());
            });

            // find the tallest item
            max = Math.max.apply(null, slideHeight);

            // set the slide's height
            $(id + ' .carousel-content').each(function() {
                $(this).css('height', max + 'px');
            });
        }

更新

我将项目符号的代码更改为以下内容，这会使它们稍微移动到顶部。 (正文中)

<div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets carousel-indicators"> 
        <li class="active" data-target="#carousel-example" data-slide-to="1"></li>
        <li class="" data-target="#carousel-example" data-slide-to="2"></li>
        <li class="" data-target="#carousel-example" data-slide-to="3"></li>
        </ol>

Answer 1

在 .bullets 元素中尝试此规则：

.bullets {
    margin: 0;
    padding: 0;
    text-align: center;
}

将包装器的偏移量更改为 2：

<div class="col-xs-offset-2 col-xs-8">

此外，从 ol:

重置边距和填充

ol {
   margin: 0;
   padding: 0;
}

勾选DEMO

Answer 2

要使项目符号起作用，您只需为每个列表项指定一个属性 data-target="#myCarousexxx"。它会自动工作，不需要编写脚本。

将 class 添加到 carousel-indicators.

的项目符号列表 UL

你的 data-slide-number 应该是 data-slide-to

是的，伙计。不需要 css 它会自动对齐。研究bootstarp.

Demo

Answer 3

 <div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets">
        <li class="active" data-slide-number="1"></li>
        <li class="" data-slide-number="2"></li>
        <li class="" data-slide-number="3"></li>
        </ol>
  </div>

要么偏移你的项目符号，要么移动你的内容区域以跨越整个宽度

Answer 4

CSS

.col-xs-offset-4 {
  /* margin-left: 33.33333333%; */
}
.col-xs-8 {
  /* width: 66.66666667%; */
}

The above two causes your Div to appear at the right-side

因此，为了克服这些问题，请使用下面的 CSS 代码，我已经攻击了一些选择器，因此它不会影响您的 bottstrap.css

 .row .col-xs-offset-4 {
       margin-left: 0;
    }
    .row .col-xs-8 ,.carousel-content div{
       width:100%;
    }
.carousel-content{
    text-align:center;

}


  .bullets.carousel-indicators{
      position:initial;
       padding:0;
       margin:0;
        width:100%;
}

The margin and width for the two classes have been modified by the above css.

The child div inside the carousel-content was not taking the full width of it parent so we use width property for that.

text-align to make the things align at the center of the Div

padding & margin to remove the extra default CSS to the carousel-indicators

DEMO

Answer 5

您的主要问题是您的标记与 Bootstrap 要求的轮播标记略有不同。因此，您需要更改以下内容：

您的 carousel-indicators ol 应该嵌套在 .carousel 的正下方，而不是 carousel-inner 中。这不仅会解决您的指示器对齐问题，还会使它们按预期显示（即 "active" 指示器将突出显示）。
轮播中不需要行和列，因为您可以将所有内容与 text-align: center; 对齐。事实上，col-xs-offset-4 col-xs-8 是导致您的文本未对齐的原因，因为它占用 8 列，但在页面左侧留下 4 列空白。

因此更新后的标记如下：

<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the first item.</p>   <span class="name">This is the first name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the second item.This is the text of the second item.</p>  <span class="name">This is the second name, This is the second name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the third item.This is the text of the third item.This is the text of the third item.</p> <span class="name">This is the third name,This is the third name,This is the third name,</span>

                </div>
            </div>
        </div>
    </div>
</div>

您还会注意到，使用此标记，您将需要最少的额外 CSS，因为您需要做的大部分工作都将由 Bootstrap CSS 处理。

参见updated demo。

作为旁注，根据 Bootstrap 你应该使用 carousel-caption class 来表示你需要插入轮播的任何文本（现在在 carousel-content), 因为 Bootstrap 假定您的旋转木马也将有每个项目的图像。但是，由于您的情况并非如此，所以我保留了 carousel-content class，因为 carousel-caption 不正确 aligned/displayed 没有相应的图像。

Answer 6

首先。把你的项目符号改成这个

    <ol class="bullets carousel-indicators"> 
      <li class="active" data-target="#carousel-example" data-slide-to="0"></li>
      <li class="" data-target="#carousel-example" data-slide-to="2"></li>
      <li class="" data-target="#carousel-example" data-slide-to="1"></li>
    </ol>

Javascript 从 0

开始计数

我为项目符号和滑块容器添加了一些 css。而且我把子弹移到了父级的后面div..好像可以

http://jsfiddle.net/gfcnqzy2/17/

Answer 7

只需进行一些更改即可使其正常运行：

1) 零索引。 从 0 开始 data-slide-to，而不是从 1:

<ol class="bullets carousel-indicators"> 
    <li ... data-slide-to="0"></li>
    <li ... data-slide-to="1"></li>
    <li ... data-slide-to="2"></li>
</ol>

2) 幻灯片填充。 为幻灯片添加一些额外的填充：

.carousel-content {
    ...
    padding: 20px 0 50px 0;
}

3) 项目符号偏移量。 减少底部项目符号偏移量以使其更好看：

.bullets {
    ...
    bottom: 10px;
}

Demo

Answer 8

使用定制轮播，这是我快速创建的示例。

http://jsfiddle.net/gppg7k6n/

还有一些 jquery：

var cont = $('.slides'),
    slide = cont.find('.slide'),
    nav = cont.find('.nav'),
    li = null,
    len = slide.length,
    index = slide.filter('.start').index();

for (var i = 0; i < len; i++) {
    nav.append($('<li>'));
}

li = nav.find('li');

showSlide();
slide.stop().eq(index).show();

function updateLi() {
    li.removeClass('white');
    li.eq(index).addClass('white');
}

function showSlide() {
    slide.stop().fadeOut().eq(index).stop().fadeIn();
    updateLi();
}
cont.click(function () {
    index = ++index % len;
    showSlide();
});

nav.click(function (e) {
    e.stopPropagation();
});

li.click(function (e) {
    index = $(this).index();
    showSlide();
});

需要对齐 bootstrap 旋转木马并使其子弹正常工作

Need to align bootstrap carousel and make its bullets working

css

jquery

carousel

twitter-bootstrap

twitter-bootstrap-3

Demo