ブートストラップ行内にボタングループを垂直に整列する

Question

ブートストラップを使用して、行内のボタングループの垂直方向の配置に関する質問があります。 This is an image that explains what I'm trying to achieve

し、次のコードは、私の現在のプロジェクトで使用されます。

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
/* Set padding to keep content from hitting the edges */ 
 

 
.body-content { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
/* Override the default bootstrap behavior where horizontal description lists 
 
    will truncate terms that are too long to fit in the left column 
 
*/ 
 

 
.dl-horizontal dt { 
 
    white-space: normal; 
 
} 
 
/* Set width on the form input elements since they're 100% wide by default */ 
 

 
input, 
 
select, 
 
textarea { 
 
    max-width: 280px; 
 
}

<div class="row"> 
 
    <div class="col-sm-9"> 
 
    @if (item.Completed) { 
 
    <h4><span class="label label-success">Completed</span> @item.Procedure.Title</h4> 
 
    } else { 
 
    <h4><span class="label label-danger">Not completed</span> @item.Procedure.Title</h4> 
 
    } 
 

 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
     <dl class="dl-horizontal"> 
 
      <dt>Time required:</dt> 
 
      <dd>@item.Procedure.Time</dd> 
 
      <dt>Material required:</dt> 
 
      <dd>@item.Procedure.Material</dd> 
 
      <dt>Engineers required:</dt> 
 
      <dd>@item.Procedure.Engineers</dd> 
 
      <dt>Documentation:</dt> 
 
      <dd>@item.Procedure.Documents</dd> 
 
     </dl> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <dl class="dl-horizontal"> 
 
      <dt>Status:</dt> 
 
      <dd>@item.Status</dd> 
 
      <dt>Note:</dt> 
 
      <dd>@item.Note</dd> 
 
     </dl> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-3" style="vertical-align: middle;"> 
 
    <div class="btn-group" role="group" aria-label="..."> 
 
     <button type="button" class="btn btn-success" role="group"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     OK 
 
     </button> 
 
     <button type="button" class="btn btn-danger" role="group"> 
 
     <span class="glyphicon glyphicon-remove"></span> 
 
     Not OK 
 
     </button> 
 
     <button type="button" class="btn btn-info" role="group" data-toggle="modal" data-target="#noteModal@(item.ID)"> 
 
     <span class="glyphicon glyphicon-pencil"></span> 
 
     Add note 
 
     </button> 
 
    </div> 
 

 
    <div id="noteModal@(item.ID)" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <h4 class="modal-title">Add note</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <div class="row"> 
 
       <div class="form-group"> 
 
       <label for="note">Note:</label> 
 
       <textarea class="form-control" rows="5" id="note" style="min-width: 100%;"></textarea> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-primary">Add note</button> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

任意のヘルプapreciated、ありがとう！

Answer 1

私は外.row

.row-flex { 
 
    display: flex; 
 
    align-items: center; 
 
}

にフレックスプロパティを使用して問題を解決10

Answer 2

これは私がやったことです：

.btn-group { 
    flex-wrap: wrap; 
    width: 80px; 
} 

button{ 
    width:80px; 
} 

Here is the JSFiddle demo