html - 框中的按钮和可调整大小的文本

桌面视图：
Desktop View

移动视图：
Mobile View

.event_item {
    background: #2b325f;
    color: white;
    text-align: center;
    padding: 30px;
    vertical-align: top;
    margin:0 0 5px 0;
    height: 215px;
}

.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}

.btn-primary{
  background:#b00909 !important;
  color:white;
  border-color: transparent;
}

.btn-align {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row eventRow">
        <div class="col-md-4">
                            <div class="events">
                                <div class="event_item">
                                    <div class="col-md-12">
                                     <h6>03/16/2016</h6>
                                    <h2>Just a title testing, why is this long?</h2>
                                    <p>Detroit</p>
                                    <h5 style="font-weight: bold;">7pm - 7am</h5>

                                    </div>

                                </div>
                            </div>
                            <div class="btn-align">
                                <button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
                                    Edit Event
                                </button>
                                <button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
                                    Delete Event
                                </button>
                            </div>
                        </div>
    </div>

    </div>

我该如何解决这个问题？

最佳答案

您缺少行类。该列浮动，使容器折叠，这使您决定添加一个设置高度，该高度对于该数量的文本而言太短了。删除固定高度，然后将.row类添加到.event_item，它应该是固定的。

https://jsfiddle.net/19aqx97w/

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

.event_item {
  background: #2b325f;
  color: white;
  text-align: center;
  padding: 30px;
  vertical-align: top;
  margin:0 0 5px 0;
}

.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}

.btn-primary{
  background:#b00909 !important;
  color:white;
  border-color: transparent;
}

.btn-align {
  text-align: center;
  margin-top: -20px;
  margin-bottom: 20px;
}

<div class="container">
  <div class="row eventRow">
    <div class="col-md-4">
      <div class="events">
        <div class="event_item row">
          <div class="col-md-12">
            <h6>03/16/2016</h6>
            <h2>Just a title testing, why is this long?</h2>
            <p>Detroit</p>
            <h5 style="font-weight: bold;">7pm - 7am</h5>

          </div>

        </div>
      </div>
      <div class="btn-align">
        <button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
          Edit Event
        </button>
        <button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
          Delete Event
        </button>
      </div>
    </div>
  </div>

</div>

关于html - 框中的按钮和可调整大小的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36157272/