Css 内联列表引导多行文本中断行_Css_Twitter Bootstrap

Css 内联列表引导多行文本中断行

css twitter-bootstrap

Css 内联列表引导多行文本中断行,css,twitter-bootstrap,Css,Twitter Bootstrap,我有这个密码 HTML代码 <div class="container"> <div class="row"> <div class="movie_item col-xs-6"> <a href="Movie.php?MovieID=1840309" class="movie_link"> <figure><img class="img-responsive" src="

我有这个密码 HTML代码

<div class="container">
   <div class="row">
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1840309" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Divergent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1840309" class="movie_title">
            Divergent
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2109248" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Age of Extinction" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2109248" class="movie_title">
            Transformers: Age of Extinction
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2039393" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Gambler" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2039393" class="movie_title">
            The Gambler
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2908446" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Insurgent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2908446" class="movie_title">
            Insurgent
            </a>
            <div class="movie_year">
               2015
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1399103" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Dark of the Moon" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1399103" class="movie_title">
            Transformers: Dark of the Moon
            </a>
            <div class="movie_year">
               2011
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1620719" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Dabangg" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1620719" class="movie_title">
            Dabangg
            </a>
            <div class="movie_year">
               2010
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1099212" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Twilight" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1099212" class="movie_title">
            Twilight
            </a>
            <div class="movie_year">
               2008
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1259571" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: New Moon" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1259571" class="movie_title">
            The Twilight Saga: New Moon
            </a>
            <div class="movie_year">
               2009
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2338151" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="PK" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2338151" class="movie_title">
            PK
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2713180" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Fury" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2713180" class="movie_title">
            Fury
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2446042" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Taken 3" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2446042" class="movie_title">
            Taken 3
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=3280916" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Atticus Institute" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=3280916" class="movie_title">
            The Atticus Institute
            </a>
            <div class="movie_year">
               2015
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1780798" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Clown" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1780798" class="movie_title">
            Clown
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1535109" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Captain Phillips" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1535109" class="movie_title">
            Captain Phillips
            </a>
            <div class="movie_year">
               2013
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0162222" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Cast Away" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0162222" class="movie_title">
            Cast Away
            </a>
            <div class="movie_year">
               2000
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0362227" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Terminal" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0362227" class="movie_title">
            The Terminal
            </a>
            <div class="movie_year">
               2004
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0120363" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 2" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0120363" class="movie_title">
            Toy Story 2
            </a>
            <div class="movie_year">
               1999
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0808151" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Angels & Demons" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0808151" class="movie_title">
            Angels & Demons
            </a>
            <div class="movie_year">
               2009
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0435761" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 3" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0435761" class="movie_title">
            Toy Story 3
            </a>
            <div class="movie_year">
               2010
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1673434" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: Breaking Dawn - Part 2" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1673434" class="movie_title">
            The Twilight Saga: Breaking Dawn - Part 2
            </a>
            <div class="movie_year">
               2012
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0337692" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="On the Road" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0337692" class="movie_title">
            On the Road
            </a>
            <div class="movie_year">
               2012
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2582846" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Fault in Our Stars" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2582846" class="movie_title">
            The Fault in Our Stars
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1587310" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Maleficent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1587310" class="movie_title">
            Maleficent
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0114709" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0114709" class="movie_title">
            Toy Story
            </a>
            <div class="movie_year">
               1995
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1905041" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Fast & Furious 6" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1905041" class="movie_title">
            Fast & Furious 6
            </a>
            <div class="movie_year">
               2013
            </div>
         </div>
      </div>
   </div>
</div>

这也需要bootstrap.css

此代码的问题是，当标题位于两行时，该电影下方的列表被打断，这不会发生在第三行的最后一个元素，在该代码的输出中，第三行的第一部电影的标题为两行，其下方的预期电影项丢失并推到其右侧。我应该怎么做才能克服这个问题，注意：我不想隐藏文本（省略号）

问题是浮动div的高度不同。。。您可以为div设置固定高度，以便为第二行文本腾出空间：

.movie_item {
    height: 220px;
}

请参见

…或考虑不使用引导并移除div上的浮动。例如，您可以使用

display:flex而不是（请参见和）
例如，在您的包含div上有如下内容：
display: flex;
flex-wrap: wrap;

请参阅（.row
替换为.wrap
，以避免引导样式）。
对于旧版本的android，您可能必须使用-webkit-前缀，请参阅。看起来旧版本的android不支持flex-wrap属性。我会把细节作为一个新问题发布，看看其他人是否有好的选择。如果没有，你可能必须恢复到固定高度并切断溢出。我的android版本是4.2.2，不太旧
display: flex;
flex-wrap: wrap;