Question

我想把旋转木马填满一个区域的所有空间。但它正在流出该部分。我需要将我的旋转木马放在第一部分内我正在使用twitter bootstrap3和html5。

CSS

#section1 {
    height: 500px;
    color: #fff;
    background-color: #1E88E5;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

img {
    height: 50px;
}

HTML

<body data-spy="scroll" data-target=".navbar" data-offset="50">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#section1">Section 1</a></li>
                        <li><a href="#section2">Section 2</a></li>
                        <li><a href="#section3">Section 3</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#section41">Section 4-1</a></li>
                                <li><a href="#section42">Section 4-2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    ---------------------------------------------------------------------------
    <div id="section1" class="container-fluid">


        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="item active">
                    <img src="1.jpg" alt="Los Angeles" style=" height=20px ">
                    <div class="carousel-caption">
                        <h3>Los Angeles</h3>
                        <p>LA is always so much fun!</p>
                    </div>
                </div>

                <div class="item">
                    <img src="2.jpg" alt="Chicago">
                    <div class="carousel-caption">
                        <h3>Chicago</h3>
                        <p>Thank you, Chicago!</p>
                    </div>
                </div>

                <div class="item">
                    <img src="3.jpg" alt="New York">
                    <div class="carousel-caption">
                        <h3>New York</h3>
                        <p>We love the Big Apple!</p>
                    </div>
                </div>

            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>

jsFiddle

Answer 1

首先，如果您正在处理响应性，那么您的风格将如下：

#section1 {
min-height: 500px; //according to your background image size
color: #fff; 
background-color: #1E88E5; // no need if you are setting background image on whole div
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}


img {
    height: 50px;  // Don't hardcoded the height of image untill you deal with some specific div width.
}

在您的情况下，<div>有一个名为container-fluid的类。在您的轮播<div>中，您必须添加<img>，如下所示：

 <div class="item active">
      <img class="img-responsive" src="1.jpg" alt="Los Angeles" style="display:inline-block;">
           <div class="carousel-caption">
                <h3>Los Angeles</h3>
                 <p>LA is always so much fun!</p>
            </div>
  </div>

要清除此plz，请提供正确理解代码的片段。

旋转木马不适合自举内部

1 个答案: