修复了bootstrap col中的按钮位置

时间：2017-06-19 10:27:26

标签： html css twitter-bootstrap css3

如果有人有时间闲暇，请帮我解决这个有希望的小问题......

我正在建立一个使用bootstrap的网站，我想要显示新闻...我制作了网格并插入了文本，但首先col的高度不同（根据文本的长度调整高度）所以我给了他们一个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，但它没有改变...

P.S。抱歉英语不好......这不是我的母语

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

这样做的方法是在你已经拥有的行下方创建第二个引导行并将按钮放在该行中。

您的代码应如下所示：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

通过在下面创建第二行但保留在同一父div中，您可以创建一个全新的行，该行将与整个板上的相同级别对齐。希望这有所帮助。

祝你好运我的朋友！

相关问题
最新问题