在Bootstrap中未正确对齐的行

时间：2017-04-20 00:20:22

标签： css twitter-bootstrap

我一直在寻找解决方案的时间，但没找到。 这是我的HTML和CSS。我不明白为什么图像'THE_IMAGE.png'与上面的div没有正确对齐？

有人能帮助我吗？ 谢谢 ！ enter image description here 

body p {
  font-size: 1.2em;
}

body a:visited{
  color: white;
}


.page-header {
  text-align: center;
}

/* Actus */

#actus {
  margin-bottom: 5em;
}

.section_title h1{
  text-align: center;
}

.button_all_actus {
  background-color: #38C8D6;
  border-color: 1px solid white;
  height: 90px;
  display: table;
  color: white;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
}
.button_all_actus p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_2 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_2 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_3 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_3 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.text_loin {
  margin-top: 180px;
}

.plus_loin {
  margin-top: 3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<section id ="actus">

  <div class="container">
    <div class="row">
      <div class="section_title">
        <h1>LOREM</h1>
        <hr class="divider_blue">
      </div>
    </div>
    <div class="row all_actus">
      <div class="col-md-4">
        <h2>LOREM</h2>
      </div>

      <a href="#">
        <div class="col-md-8 button_all_actus">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a> 

      <a href="#">
        <div class="col-md-4 col-md-offset-4 button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-4 col-md-offset button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4 col-md-offset-4 button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-4  button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-8 col-md-offset-4 button_actus_size_3">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>
    </div>
  </div> 
</section>

<section id="temoignages">
  <div class="container">
    <div class="row">
      <div class="section_title">
        <h1>Lorem</h1>
        <hr class="divider_blue">
      </div>
    </div>

    <div class="row">
      <div class="col-md-7">
        <p>Lorem ipsum</p>
      </div>

      <div class="col-md-3 col-md-offset-2">
        <img src="<?php bloginfo('template_directory'); ?>/images/THE_IMAGE.png">
      </div>
    </div>
  </div>
</section>

<?php get_footer(); ?>

2 个答案:

答案 0 :(得分：0)

把 class =“img-responsive”放到你的父div的大小。

  

解释

  img-responsive是一个bootstrap类名，它会自动使你的图像100％宽度适合你的父div。例如，如果您的父div为100px且图像的with为500px，那么您的500px图像宽度将与10​​0px相同，这是父div的宽度（不调整文档大小）。

     

此处有更多解释：

     

https://v4-alpha.getbootstrap.com/content/images/

我在我的电脑上试过它并且它正在工作..请参阅下面的代码。

<section id="temoignages">
 <div class="container">
  <div class="row">
  <div class="section_title">
    <h1>Lorem</h1>
    <hr class="divider_blue">
  </div>
</div>

<div class="row">
  <div class="col-md-7">
    <p>Lorem ipsum</p>
  </div>

  <div class="col-md-3 col-md-offset-2">
      <img src="<?php bloginfo('template_directory'); ?>/images/THE_IMAGE.png" class="img-responsive">
  </div>
</div>
  </div>
 </section>


body p {
  font-size: 1.2em;
}

body a:visited{
  color: white;
}

.divider_blue {
  border-top: 5px solid #0BB0DE;
  width: 30px;
  border-radius: 40px;
}

.page-header {
  text-align: center;
}

/* Actus */

#actus {
  margin-bottom: 5em;
}

.section_title h1{
  text-align: center;
}

.button_all_actus {
  background-color: #38C8D6;
  border-color: 1px solid white;
  height: 90px;
  display: table;
  color: white;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
}
.button_all_actus p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_2 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_2 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_3 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_3 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.text_loin {
  margin-top: 180px;
}

.plus_loin {
  margin-top: 3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 

<section id ="actus">

  <div class="container">
    <div class="row">
      <div class="section_title">
        <h1>Actus</h1>
        <hr class="divider_blue">
      </div>
    </div>
    <div class="row all_actus">
      <div class="col-md-4">
        <h2>LOREM</h2>
      </div>

      <a href="#">
        <div class="col-md-8 button_all_actus">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a> 

      <a href="#">
        <div class="col-md-4 col-md-offset-4 button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-4 col-md-offset button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4 col-md-offset-4 button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-4  button_actus_size_2">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>

      <a href="#">
        <div class="col-md-8 col-md-offset-4 button_actus_size_3">
          <p class="text-left">LOREM</p>
          <p class="text-right"> &#8594; </p>
        </div>
      </a>
    </div>
  </div> 
</section>

<section id="temoignages">
  <div class="container">
    <div class="row">
      <div class="section_title">
        <h1>Lorem</h1>
        <hr class="divider_blue">
      </div>
    </div>

    <div class="row">
      <div class="col-md-7">
        <p>Lorem ipsum</p>
      </div>

      <div class="col-md-3 col-md-offset-2">
        <img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</section>

答案 1 :(得分：0)

如您所见，图片中包含ADD jar /PATH/TO/JARFILE/brickhouse-<VERSIONS>-SNAPSHOT.jar 和padding-left: 15px来自bootstrap.css：

padding-right: 15px

仅使用.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } 是不够的，您需要使用padding-right: 0;强制它。

简单的测试方法是将padding-right: 0 !important;添加到图像父级。 或者，您可以将background-color添加到css中，以快速检查所有元素的块大小。

enter image description here 

* { border: 1px solid red; }
body p {
  font-size: 1.2em;
}

body a:visited{
  color: white;
}

.divider_blue {
  border-top: 5px solid #0BB0DE;
  width: 30px;
  border-radius: 40px;
}

.page-header {
  text-align: center;
}

/* Actus */

#actus {
  margin-bottom: 5em;
}

.section_title h1{
  text-align: center;
}

.button_all_actus {
  background-color: #38C8D6;
  border-color: 1px solid white;
  height: 90px;
  display: table;
  color: white;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
}
.button_all_actus p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_2 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  table-layout: fixed;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_2 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.button_actus_size_3 {
  background-color: #38C8D6;
  height: 50px;
  display: table;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  color: white;
}

.button_actus_size_3 p {
  display:table-cell;
  vertical-align:middle;
  font-weight: bold;
}

.text_loin {
  margin-top: 180px;
}

.plus_loin {
  margin-top: 3em;
}

.alignright {
	text-align: right;
	padding-right: 0 !important;
}

相关问题
最新问题