需要对齐引导轮播并使其子弹工作
Posted
技术标签:
【中文标题】需要对齐引导轮播并使其子弹工作【英文标题】：Need to align bootstrap carousel and make its bullets working 【发布时间】：2015-07-14 18:14:32 【问题描述】：我有一个需要对齐的文本轮播，也不确定如何使其项目符号处于活动状态。
通过单击下面的演示链接，您会看到项目符号点不在页面中间，并且根据名称和文本的大小，名称和项目符号之间的距离会发生变化。
对于任何屏幕尺寸，我都需要它们（文本、名称、项目符号）位于页面中间。
Demo
Updated demo
.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>
【问题讨论】：
看看我说什么就行了，不需要css它会自动处理。 杰克你仍然需要从 0 而不是从 1 的数据滑动到 【参考方案1】：只需进行一些更改即可使其正常运行：
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
【讨论】：
【参考方案2】：首先。把你的项目符号改成这个
<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/
【讨论】：
【参考方案3】：在.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
【讨论】：
我查看了演示，现在问题是文本位于右侧，项目符号位于页面中间。它们必须都在页面的中间。所以有文本，然后是名称，最后一行项目符号都在中间。【参考方案4】： <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>
要么偏移你的项目符号，要么移动你的内容区域以跨越整个宽度
【讨论】：
我做到了，但文字、名称和项目符号没有对齐。【参考方案5】：CSS
.col-xs-offset-4
/* margin-left: 33.33333333%; */
.col-xs-8
/* width: 66.66666667%; */
以上两个导致你的Div出现在右侧
所以为了克服那些使用下面的 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%;
上面的css修改了两个类的
margin和width。carousel-content内的子div没有占据其父级的全部宽度，因此我们为此使用width属性。text-align使事物在Div的中心对齐padding&margin删除额外的默认 CSS 到carousel-indicators
DEMO
【讨论】：
谢谢我使用了你提供的css，子弹仍然需要向左一点。还有如何在轮播工作时改变子弹？ 谢谢，请查看更新的演示链接。我激活了项目符号并使用了您的代码，但项目符号现在位于文本中间。 @Jack 现在看看 jack 也看看 DEMO 我试过了，唯一的问题是小屏幕的文字大小需要变小。 我认为您应该使用媒体查询来缩小所需屏幕尺寸或设备的文本尺寸。【参考方案6】：您的主要问题是您的标记与 Bootstrap 轮播所需的标记有点不同。因此，您需要更改以下内容：
-
您的
carousel-indicators ol 应该嵌套在.carousel 的正下方，而不是carousel-inner 中。这不仅会解决指标的对齐问题，还会使指标按预期显示（即“活动”指标将突出显示）。
轮播中不需要行和列，因为您可以将所有内容与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 类来处理您需要在轮播中插入的任何文本（现在在 carousel-content 中），因为 Bootstrap 假设您的轮播也会有每个项目的图像。但是，由于您的情况并非如此，因此我保留了 carousel-content 类，因为 carousel-caption 在没有相应图像的情况下无法正确对齐/显示。
【讨论】：
【参考方案7】：使用定制的轮播，这是我快速创建的示例。
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();
);
【讨论】：
【参考方案8】：要使项目符号正常工作，您只需为每个列表项指定一个属性为data-target="#myCarousexxx"。它会自动工作，无需编写脚本。
将carousel-indicators 的UL 类添加到项目符号列表中。
您的data-slide-number 应为data-slide-to
老兄。不需要css，它会自动对齐。研究 bootstarp。
Demo
【讨论】：
我在所有项目符号中添加了 data-target="#carousel-example" 但它不起作用。请您区分每个部分的答案（项目符号功能，设计） 先给ol添加一个类carousel-indicators
第二次添加data-target=gr8。第三，您将 data-slide-number 更改为 data-slide-to 。它会工作
好的，当我将它添加到 ol 时，项目符号会向上并位于文本中间。
只需给每个项目一些 min-height:200px 或其他东西。它会起作用的……试试一些 CSS。以上是关于需要对齐引导轮播并使其子弹工作的主要内容，如果未能解决你的问题，请参考以下文章