如何在div上方的文本中正确使用Bootstrap列？

时间：2017-04-15 08:20:33

标签： css twitter-bootstrap

这段代码让我很困惑。我有文字＆＃34;赢得的方式＆＃34;超过多个div。问题是文本正在扰乱div的流程。但是，如果我从Bootstrap列中删除文本，它将无法响应并与其他div一起流动。

如何使文本与其他div正确流动，但也不会破坏其下方的div？

＆＃13;
＆＃13; 
/* Ways to Win */

#win_text {
  font-size: 20px;
  position: relative;
  font-weight: bold;
  position: relative;
}

.win_box {
  position: relative;
  top: 50px;
  height: 110px;
  width: 196px;
  border: 1px solid #C0C0C0;
  border-bottom: none !important;
  display: inline-block;
  margin-bottom: 50px !important;
}

#video {
    font-size: 45px;
    color: white;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 28px;
    left: 80px;
    text-shadow: 0px 0px 3px #353535;
}

.win_box:hover .description {
  border: 1px solid #2A6496;
}

.win_box:hover  {
  border: 1px solid #2A6496;
}

.description {
  position: relative;
  top: 63px;
  left: -1px;
  padding: 5px;
  border-top: none !important;
  border: 1px solid #C0C0C0;
  width: 196px !important;
}

.win_link {
  text-decoration: nonew !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

#win_row {
  max-width: 1550px;
}

/* End of Ways to Win */
＆＃13; 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Ways to Win -->

<br>
 
 <div class='row' id='win_row'>
   
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    
    <!-- Title -->
    <span id='win_text'> Ways to Win </span> <br>
          
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <!-- BREAK -->
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
</div>
  
  <!-- Win Boxes -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

确保不对标题使用跨度，它们必须是块元素。我还将你的标题放在自己的行中，因此它与下面的内容保持分开。

另外，不要使用break标记来创建布局，它们不会清除行，并且会增加更难以控制的空间。

您的布局现在可以使用，您只需要整理标题和视频之间的间距：

/* Ways to Win */

#win_text {
  font-size: 20px;
  position: relative;
  font-weight: bold;
  position: relative;
}

.win_box {
  position: relative;
  top: 50px;
  height: 110px;
  width: 196px;
  border: 1px solid #C0C0C0;
  border-bottom: none !important;
  display: inline-block;
  margin-bottom: 50px !important;
}

#video {
    font-size: 45px;
    color: white;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 28px;
    left: 80px;
    text-shadow: 0px 0px 3px #353535;
}

.win_box:hover .description {
  border: 1px solid #2A6496;
}

.win_box:hover  {
  border: 1px solid #2A6496;
}

.description {
  position: relative;
  top: 63px;
  left: -1px;
  padding: 5px;
  border-top: none !important;
  border: 1px solid #C0C0C0;
  width: 196px !important;
}

.win_link {
  text-decoration: nonew !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

#win_row {
  max-width: 1550px;
}

/* End of Ways to Win */
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Ways to Win -->

<div class="container">
<div class="row">
    <!-- Title -->
    <div id='win_text'> Ways to Win </div>
</div>
 
 <div class='row' id='win_row'>
   
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>

          
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  <!-- BREAK -->
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
  <div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
    <a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
   
   <div class='description'> Earn 5 Points </div>
   
   </div> </a>
  </div>
  
  
</div>
</div>
  
  <!-- Win Boxes -->

相关问题
最新问题