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

Question

桌面视图： 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>

我该如何解决这个问题？

Answer 1

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

编辑：打扰一下，我完全误解了你。这应该是你真正想要实现的目标 - ＆gt; fiddle

您只是为容器使用了错误的colum-rule。您刚刚将col-md-4放入其中col-md-12或空{（就像您已为移动设备完成此操作）。

添加col-*-12即可显示全宽。如果你把它留空，也是如此。由于您已为md而不是xs设置了值，因此xs完全正常，而md看起来有点不同。我希望现在这可以解决你的问题。

注意：如果您希望自己的按钮位于事件项中，只需添加margin-top: -20px;即可。您可以查看我以前的答案。希望现在可以帮助和澄清一切。

Answer 2

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

https://jsfiddle.net/19aqx97w/

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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%;
}