twitter-bootstrap twitter bootstrap 轮播大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14590792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:13:06  来源:igfitidea点击:

twitter bootstrap carousel size

imagetwitter-bootstrapsizecarousel

提问by user2016949

I'm creating a website for my dad using Twitter Bootstrap, it's done except for one thing: I can't figure out how to:
- reduce the carousel width
- center the carousel
- make scroll arrows still on image

我正在使用 Twitter Bootstrap 为我父亲创建一个网站,它已经完成,除了一件事:我不知道如何:
- 减少轮播宽度
- 使轮播居中
- 使滚动箭头仍然在图像上

here is the website so you can check the source

这是网站,因此您可以查看来源

I've literally gone line by line through the css and adjusted every aspect of the carousel and then checked it in my browser.

我已经逐行浏览了 css 并调整了轮播的各个方面,然后在我的浏览器中进行了检查。

Another point of confusion is that some of these adjustments have an effect if i test it in my browser with SHIFT+CTRL+R(so notepad++ opens it in google chrome directly from my desktop w/o using a server or host) and have seen some awkward changes, yet none of these changes carry over when I place them on the server.

另一个令人困惑的地方是,如果我在浏览器中测试它,其中一些调整会产生影响SHIFT+CTRL+R(因此记事本++直接从我的桌面使用服务器或主机在谷歌浏览器中打开它)并且看到了一些尴尬的变化,但是当我将它们放在服务器上时,这些更改都不会保留。

I've seen some other posts suggesting adjustments to .carouseland @imageand have tried those without success as well.

我已经看到其他一些帖子建议调整.carousel@image并且也尝试过那些没有成功的帖子。

回答by Arnold Daniels

You can just set the width of the carousel using CSS. Centering a block element is done with margin: 0 auto. Only change the CSS of .carousel, the rest is automatically styled correctly.

您可以使用 CSS 设置轮播的宽度。将块元素居中是通过margin: 0 auto. 仅更改 的 CSS .carousel,其余的会自动正确设置样式。

<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
    ...
</div>

Check out this jsfiddleto see it work.

查看此 jsfiddle以查看它是否有效。

回答by Billy Moat

Simply add a class of 'container' onto the DIV with an ID of 'myCarousel'.

只需将“容器”类添加到 ID 为“myCarousel”的 DIV 中。

So this...

所以这...

<div id="myCarousel" class="carousel slide">

Becomes...

变成...

<div id="myCarousel" class="carousel slide container">