如何在引导程序中保持div对齐

Question

我正在使用bootstrap来布局我的页面。 在特定的屏幕宽度上，div变得不对齐，因为其中一个div的标题很长，占据了另一条线。

如果它旁边的div也有一个长标题（因此它们都占据2行），那么div将正确对齐。

我应该如何配置div以便无论标题是长还是短，div仍然会对齐，就是这个屏幕width，我应该并排看到两个div，而不是看到第三个div移到右边而第四个div移动到下一行？

CODE

<div class="container">
    <div class="row">
    forloop {
        <div class="col-md-3 col-xs-6" style="margin-bottom: 25px">
            <img>
            <h3>
        </div>
    }
    </div>
</div>

Answer 1

2个选项：

• 您可以{3}项clear:left。

＆＃13;

＆＃13;

.row > div:nth-of-type(2n+1) {
  clear: left
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>Very big text here to make 2 lines</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive"src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive"src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

• 您可以xs使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-3 col-xs-6"> <img class="img-responsive" src="//placehold.it/300x300" /> <h3>Very big text here to make 2 lines</h3> </div> <div class="col-md-3 col-xs-6"> <img class="img-responsive" src="//placehold.it/300x300" /> <h3>text here</h3> </div> <div class="clearfix visible-xs-block"></div> <div class="col-md-3 col-xs-6"> <img class="img-responsive" src="//placehold.it/300x300" /> <h3>text here</h3> </div> <div class="col-md-3 col-xs-6"> <img class="img-responsive" src="//placehold.it/300x300" /> <h3>text here</h3> </div> </div> </div>

＆＃13;

＆＃13;

; 0

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您知道<h3>最多两行文字，则可以为h3{display:block;line-height:16px;height:32px;} 设置固定尺寸（高度）。

像

这样的东西

        // my pretend dataset
        List<string> fields = new List<string>();
        // my 'columns'
        fields.Add("this_thing");
        fields.Add("that_thing");
        fields.Add("the_other");

        dynamic exo = new System.Dynamic.ExpandoObject();

        foreach (string field in fields)
        {
            ((IDictionary<String, Object>)exo).Add(field, field + "_data");
        }

        // output - from Json.Net NuGet package
        textBox1.Text = Newtonsoft.Json.JsonConvert.SerializeObject(exo);

但@dippas建议可能更好。