固定按鈕位置

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之內，爲您打造一個全新的行，這將對齊到相同的水平。希望這有助於。

祝你好運我的朋友！