文章/答案/技术大牛

发布

社区首页 >问答首页 >引导滑块宽度父项(12个断点)

问引导滑块宽度父项(12个断点)
EN

Stack Overflow用户

提问于 2016-11-24 18:07:29

回答 2查看 71关注 0票数 0

好的，我有一个滑块，它在一个普通的容器里(不是容器流体)。问题是滑块并不是100%的宽度(请看图片)。我已经尝试添加css宽度和高度100%，但它不起作用。我需要的滑块是100%的宽度(12列lg-12)。

你可以看到空白处。它需要被填充。

代码如下：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="css/basic-template.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <!-- Nas font -->

    </head>
    <body>
        <!--Slider -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-sm-12"> 

                        <div id="mojslider" class="carousel slide" data-ride="carousel">

                            <!-- Indikatori (male tacke na slajderu) -->
                            <ol class="carousel-indicators">
                                <li data-target="#mojslider" data-slider-to="0" class="active"> </li>
                                <li data-target="#mojslider" data-slider-to="1"> </li>
                                <li data-target="#mojslider" data-slider-to="2"> </li>
                            </ol>
                            <!-- Slajd-slike -->
                            <div class="carousel-inner" role="listbox">
                                <!--Svaki div je jedan slajd -->
                                <div class="item active">
                                    <img src="Slike/samsung.png" alt="samsungslide" />
                                    <div class="carousel-caption">
                                        <h1> <font face="Roboto Condensed" size="15" color="white"> Samsung Galaxy s7  </font> </h1>
                                    </div>
                                </div>
                                <div class="item">
                                    <img src="Slike/iphone.png" alt="iphoneslide" />
                                    <div class="carousel-caption">
                                        <h1> <font face="Roboto Condensed" size="15" color="white"> iPhone 7 </font> </h1>
                                    </div>
                                </div>
                                <div class="item">
                                    <img src="Slike/lg.png" alt="lglide" />
                                    <div class="carousel-caption">
                                        <h1> <font face="Roboto Condensed" size="15" color="white"> LG V10 </font> </h1>
                                    </div>
                                </div>
                            </div>
                            <!-- Kontrole - next i prev dugme -->
                            <a class="left carousel-control" href="#mojslider" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
                            </a>
                            <a class="right carousel-control" href="#mojslider" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
                            </a>


                        </div>

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

            <br/>

            <!--Container 1 - Mobtech - uvek sa Vama! -->
            <div class="container"> 
                <div class="row">
                    <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                    <div class="col-lg-12 bg-zelenapozadina"> 
                        <div class="col-lg-12 bg-zelenapozadina">
                            <center> <font face="Roboto Condensed" size="6"> Mobtech - uvek sa Vama ! </font> </center>
                            <p> 
                            <font face="Roboto Condensed" size="4"> 
                            Lorem ipsum dolor sit amet, his no postulant liberavisse. At nibh lucilius sed. Omnium latine efficiendi ea vis. Elit facilisis mel et. Eu qui erat tation elaboraret. Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.

                            Iriure accommodare vim et. Sed alia munere pertinax no. Duo eu sumo possim, nam te omnis offendit, no scaevola oportere his. Ut qui dolor scripserit reprehendunt. Ne sea zril vivendo, duo iudico aliquam laoreet eu, cu nullam essent delectus ius.

                            Pri facer accusam omittam eu, eam id dico prompta recusabo. Vix an suas alia putent, quo utinam deleniti legendos ne. Vis et nibh fugit aliquam. Ex est salutandi interesset, soluta ancillae incorrupte sea ne. Qui id velit dicunt interpretaris, ad option blandit nam. Odio mucius adversarium has at. Duo option intellegebat signiferumque ex, ut oblique detraxit sit.
                            </font>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <br/>

            <!-- JavaScript fajl -->
            <script src="js/jquery.min.js"></script>
            <!-- Kompresovan JavaScript fajl -->
            <script src="js/bootstrap.min.js"></script>
    </body>
</html>

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2016-11-24 18:10:03

问题是Bootstrap的容器两边各有15个像素的填充。使用类删除此填充。最简单也可能是最明智的方法之一就是将noPadding类添加到幻灯片的container所在的同一个div中。

在此之后，您只需设置以下CSS：

.noPadding { padding: 0 !important; }

页面的其他区域看起来比滑块更宽的原因是填充不会影响背景色。

票数 2

Stack Overflow用户

发布于 2016-11-24 18:21:27

如果你给.container: padding: 0;，<div class="col-lg-12 col-sm-12"></div>会有30px的宽度。我建议你这么做：

.col-lg12.col-sm-12 {
   padding: 0;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40783399

复制

相似问题

问引导滑块宽度父项(12个断点)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导滑块宽度父项(12个断点)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导滑块宽度父项(12个断点)
EN