Bootstrap标题超过了图像

时间:2015-10-03 20:17:25

标签: css twitter-bootstrap

<div class="container"> 
<style>

       .spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    

.clear-L-R {   
    padding-left:0px;
    padding-right: 0px;
}     


.caption{
    cursor: pointer;
    position: absolute;
    top:0;
    height:100%;
    background-color: rgba(0,0,0,0.65);
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
}
.caption:hover{
    opacity: 1;
}
.caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.caption-text{
    color: #fff;
    text-align: center;
}   

       </style>

       <div class="container col-lg-12 spacer"></div>

<div class="container col-lg-12">

      <div class="row-fluid">

        <div class="col-sm-12 col-lg-6">

            <img src="http://lorempixel.com/800/600/nature" class="img-responsive" alt="">
            <div class="col-xs-12  caption caption-text">
                <h1>Amazing Caption</h1>
                <p>Whatever It Is - Always Awesome</p>

            </div>
        </div>

        <div class="col-sm-12 col-lg-6">

            <img src="http://lorempixel.com/800/600/nature" class="img-responsive" alt="">
            <div class="col-xs-12 caption caption-text">
                <h1>Amazing Caption</h1>
                <p>Whatever It Is - Always Awesome</p>
            </div>
         </div>
        </div>


</div><!--END row-->  

enter image description here

我正在尝试使标题响应并且仅填充图像的宽度,但它占用了填充的大小。尝试了一些修复似乎没有任何作用。灰色部分是标题过去的地方。

1 个答案:

答案 0 :(得分:1)

您的标题相对于col-sm-12 col-lg-6 div绝对定位,div olRule.Conditions.Body.Text Debug.Print olRule.Conditions.MessageHeader.Text 左侧和右侧有填充。获取所需显示的一个选项是将标题放入单独的相对位置Sub TestRule() Dim olRules As Outlook.Rules Dim olRule As Outlook.Rule Set olRules = Application.Session.DefaultStore.GetRules Set olRule = olRules.Item("TestRule") Debug.Print TypeName(olRule) printArray olRule.Conditions.Body.Text printArray olRule.Conditions.MessageHeader.Text End Sub 。请参阅此bootply,其中给出了一个示例。