どのようにしてアンカータグを正しく整列させることができますか？

Question

私はブートストラップ3を使用していて、左側のdivの下部にあるようにアンカーを整列しようとしています。現時点では、彼らはdivの下にある、すなわちその下にある：

<div class="row vcenteritems itemsheight border"> 
    <div class="col-md-8 small"> 
     <!-- react-text: 144 -->Docos 
     <!-- /react-text --> 
     <!-- react-text: 145 -->channel package 
     <!-- /react-text --> 
    </div> 
     <div class="col-md-2 oneoff-grey large middle">??</div> 
     <div class="col-md-2 dollar large middle oneoff-grey">15</div> 
    </div> 
    <div class="col-md-12 tiny"><a href="#">Change</a> 
     <!-- react-text: 150 -->| 
     <!-- /react-text --><a href="">Remove</a> 
</div> 

最後のdivには問題があります。どのように他のスタイルを損なわずに、div内の境界線を境界線に合わせることができますか？

またサンプルhere

Answer 1

あなたのHTMLは少し調整が必要であるように見えます - .tinyは.border外に現在あります。

.borderを1つ上に移動すると、境界内のリンクが折り返されます。

これがソートされたら、.tiny divの周りに.rowが必要です。

コデペンhere。

以下

更新されたコード：

<div class="cart"> 
    <div class="border"> 
     <div class="row vcenteritems itemsheight"> 
      <div class="col-md-8 small"> 
       <!-- react-text: 144 -->Docos 
       <!-- /react-text --> 
       <!-- react-text: 145 -->channel package 
       <!-- /react-text --> 
      </div> 
      <div class="col-md-2 oneoff-grey large middle">??</div> 
      <div class="col-md-2 dollar large middle oneoff-grey">15</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-12 tiny"> 
       <a href="#">Change</a> 
       <!-- react-text: 150 -->| 
       <!-- /react-text --> 
       <a href="">Remove</a> 
      </div> 
     </row> 
    </div> 
</div> 

SCSSは同じまま：

/*************Cart******************/ 
.cart { 

    .verticalline { 
    border-left: thin solid #f7f7f7; 
    } 

    //todo remove this 
    /**for testing**/ 
    .border { 
    border: dashed 0.5px; 
    } 

    .border2 { 
    border: solid red 1px; 
    } 

    /***fontsizes***/ 
    .tiny { 
    font-size: 12px; 
    } 

    .small { 
    font-weight: bold; 
    font-size: 14px; 
    } 

    .costsize { 
    font-size: 18px; 
    } 

    .medium { 
    font-size: 24px; 
    } 

    .large { 
    font-size: 40px; 
    } 

    //shows dollarsign left top 
    .dollar:before { 
    content: '$'; 
    font-size: 18px; 
    vertical-align: top; 
    } 

    /****alignment***/ 
    .right { 
    text-align: right; 
    } 

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

    .hcenteritems { 
    display: flex; 
    justify-content: center; 
    } 

    .middle { 
    text-align: center; 
    } 

    //order button collapse 
    .collapse { 
    display: none 
    } 

    .collapse.in { 
    display: block 
    } 

    /***Heights****/ 
    .toplineheight { 
    height: 84px; 
    } 

    .headerheight { 
    height: 66px; 
    } 

    .itemsheight { 
    height: 80px; 
    } 

    .totalheight { 
    height: 107px; 
    } 

    .costheight { 
    height: 95px; 
    } 

    .btn { 
    height: 43px; 
    width: 152px; 
    } 

    /**padding***/ 

    // 
    .itemspad { 
    margin-top: 8px; 
    // padding: 2px; 
    } 

    /**colors***/ 
    .light-grey { 
    background-color: #f7f7f7; 
    //height:100%; 
    } 

    .oneoff-grey { 
    background-color: #f7f7f7; 
    height:100%; 
    } 

    .normal-grey { 
    background-color: #f1f1f1 
    } 

    .rightwhite 
    { 
    border-right: white 2px; 
    } 

    .totalblue{ 
    background-color: #6fb9ef; 
    height:100%; 
    opacity: 0.2; 
    } 

    .pricesblue{ 
    background-color: #dde8f7; 
    height:100%; 
    } 

}