固定按钮位置

Question

如果someaone有一些空闲时间普莱舍帮助我解决这个希望samll问题...

我使用的引导，我想显示的消息建立一个网站... ...我做网格和插入文本，但首先col的werent相同的高度（高度根据文本的长度进行调整），所以我给了他们一个fixed height of 264px;但现在当我有一个长文本“阅读更多”按钮跳出col ...我需要帮助，让他留在col ...

我的HTML：

<section id="main-content"> 
<div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
      <div class="col-md-9"> 
       <div id="news"> 
       <div class="row"> 
        <div class="col-md-12"> 
        <div class="row"> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo 
          s seznamom igralcev je - tukaj</p> 
          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
         </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo 
          s seznamom igralcev je - tukaj</p> 
          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
         </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
          <p>Ekipa MNZ bo v nedeljo,j</p> 
          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
         </div> 
         </div> 
        </div> 
        <div class="row row-eq-height"> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo 
          s seznamom igralcev je - tukaj</p> 
          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
         </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <h1 class="naslov">Festival mlajših dečkov u-12hsbdfjhsdjfvsdjvf</h1> 
          <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo 
          s seznamom igralcejhdvfjsdhfhsdbd h ksjdbfkhs jhv je - tukaj</p> 
          <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
         </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="novica"> 
          <a href="#"><h1 class="naslov text-center">Arhiv novic</h1></a> 
         </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 

而CSS：

#main-content .novica { 
    background-color: #ebebeb; 
    font-size: 0.8em; 
    padding: 10px; 
    margin-top: 24px; 
    height: 264px; 
} 

#main-content .novica a { 
    text-decoration: none; 
} 

.naslov { 
    text-transform: uppercase; 
    font-size: 1.5em !important; 
    color: #191E4E !important; 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-weight: bold !important; 
    line-height: 1.1; 
} 

.gumb { 
    margin-top: 25px; 
    padding-bottom: 12px; 
} 

.gumb-sivi { 
    border-color: #898989; 
    background-color: #898989; 
    color: #fff; 
    width: 100px !important; 
    height: 28px !important; 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-weight: bold !important; 
    line-height: 1.1; 
    border-radius: 0px !important; 
} 

.gumb-sivi:hover, .gumb-sivi:active, .gumb-sivi:visited { 
    border-color: #898989 !important; 
    background-color: #898989 !important; 
    color: #fff !important; 
    border-radius: 0px !important; 
} 

我已经看到了，看了一些帖子有类似的问题在这里，但没有一个解决方案的工作对我来说 ...我也使用尝试.row-eq-height但它没有变化...

PS对不起，这不是我的母语

Answer 1

通过使用position: absolute你可以做到这一点。

更新.gumb规则像这样和按钮将会在底部

.gumb { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 12px;   /* move it 12px up from bottom */ 
} 

注对齐，这正常工作也.gump的父母需要有其他的位置比static，但在你的案例bootstrap的列已经设置，到position: relative。

#main-content .novica { 
 
    background-color: #ebebeb; 
 
    font-size: 0.8em; 
 
    padding: 10px; 
 
    margin-top: 24px; 
 
    height: 264px; 
 
} 
 

 
#main-content .novica a { 
 
    text-decoration: none; 
 
} 
 

 
.naslov { 
 
    text-transform: uppercase; 
 
    font-size: 1.5em !important; 
 
    color: #191E4E !important; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-weight: bold !important; 
 
    line-height: 1.1; 
 
} 
 

 
.gumb { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 12px; 
 
} 
 

 
.gumb-sivi { 
 
    border-color: #898989; 
 
    background-color: #898989; 
 
    color: #fff; 
 
    width: 100px !important; 
 
    height: 28px !important; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-weight: bold !important; 
 
    line-height: 1.1; 
 
    border-radius: 0px !important; 
 
} 
 

 
.gumb-sivi:hover, 
 
.gumb-sivi:active, 
 
.gumb-sivi:visited { 
 
    border-color: #898989 !important; 
 
    background-color: #898989 !important; 
 
    color: #fff !important; 
 
    border-radius: 0px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section id="main-content"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="row"> 
 
     <div class="col-md-9"> 
 
      <div id="news"> 
 
      <div class="row"> 
 
       <div class="col-md-12"> 
 
       <div class="row"> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
 
         <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom 
 
         igralcev je - tukaj</p> 
 
         <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
 
         <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom 
 
         igralcev je - tukaj</p> 
 
         <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
 
         <p>Ekipa MNZ bo v nedeljo,j</p> 
 
         <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="row row-eq-height"> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <h1 class="naslov">Festival mlajših dečkov u-12</h1> 
 
         <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom 
 
         igralcev je - tukaj</p> 
 
         <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <h1 class="naslov">Festival mlajših dečkov u-12hsbdfjhsdjfvsdjvf</h1> 
 
         <p>Ekipa MNZ bo v nedeljo, 11.6.2017, s fanti letnika 2015 (U12) nastopila v okviru programa Nogometa za vse na festivalu dneva za starostno kategorijo U-12. Festival se bo odvijal na igriščih NNC Brdo na Brdo pri Kranju. Vabilo s seznamom 
 
         igralcejhdvfjsdhfhsdbd h ksjdbfkhs jhv je - tukaj</p> 
 
         <div class="gumb text-center"><a class="btn btn-default gumb-sivi text-center" href="#" role="button">več</a></div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <div class="novica"> 
 
         <a href="#"> 
 
         <h1 class="naslov text-center">Arhiv novic</h1> 
 
         </a> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

这样做将是创建下面的一个你已经有第二个引导行，并把该行内的按钮的方式。

你的代码应该是这个样子：

.main-section { 
 
    /* optional code here */ 
 
} 
 

 
.main-section row { 
 
    /* optional code here */ 
 
} 
 

 
.main-section col-sm-3 { 
 
    /* optional code here */ 
 
} 
 

 
.main-section h1 { 
 
    text-align: center; 
 
} 
 

 
.main-section p { 
 
    /* optional code here */ 
 
} 
 

 
.button { 
 
    height: 70px; 
 
    width: 150px; 
 
    margin: 10px auto; 
 
}

<div class="main-setion"> 
 
    <div class="row"> 
 
    <div class="col-sm-3"> 
 
     <h1>example header</h1> 
 
     <p>Example text</p> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <h1>example header</h1> 
 
     <p>Example text</p> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <h1>example header</h1> 
 
     <p>Example text</p> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <h1>example header</h1> 
 
     <p>Example text</p> 
 
    </div> 
 
    </div> 
 
    <div class="buttons"> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <div class="button"> 
 
      <!-- place optional text here --> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div class="button"> 
 
      <!-- place optional text here --> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div class="button"> 
 
      <!-- place optional text here --> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div class="button"> 
 
      <!-- place optional text here --> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

通过下面创建一个第二排，但相同的父DIV之内，为您打造一个全新的行，这将对齐到相同的水平。希望这有助于。

祝你好运我的朋友！