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

Question

桌面视图：桌面视图

移动视图：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>

我该如何解决此问题？

Answer 1

您缺少行类。该列浮动，折叠容器，这使您决定添加一个设置的高度，该高度对于该数量的文本来说太短。移除固定高度，并将.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>

Answer 2

根据您的评论，您希望将桌面视图中的按钮与移动视图中的方式对齐。您当前正在.btn-align容器上使用margin-top: -20px;。删除此项，您的按钮将在您的内容后立即对齐。

编辑：对不起，我完全误解你了。这里应该是你真正想要实现的->小提琴

您只是对容器使用了错误的列规则。你只是把col-md-4放在里面，而它应该是col-md-12或空的（就像你为手机做的那样）。

通过添加col-*-12，您可以获得显示器的全宽。如果你把它空着，也是一样。由于您为md而不是为xs设置了值，所以您的xs完全正常，而md看起来有点不同。我希望现在这能解决你的问题。

注意：如果您希望您的按钮在事件项目中有一点，只需添加回margin-top: -20px;即可。你可以查一下我以前的答案。希望这能帮助并澄清一切。

Answer 3

使用百分比，就像我在.event_item部分中使用的一样。百分比将自动调整。

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