1. 首頁
  2. 問答
  3. 如何在div上面的文本正確使用Bootstrap列？

如何在div上面的文本正確使用Bootstrap列？

2017-04-15 173 views
0

這段代碼真的讓我很困惑。我有多個div的文本「贏得勝利」。問題在於文本正在破壞div的流動。但是如果我從Bootstrap列中刪除文本，它將不會響應並與其餘的div一起流動。如何在div上面的文本正確使用Bootstrap列？

如何使文本與其他div的正常流動，也不會破壞它下面的div？

/* 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 --> 
 

 
<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 -->

來源

2017-04-15 user6902601

回答

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 -->

來源

2017-04-15 08:26:19

相關問題

 相關問題