Question

我正在使用bootstrap 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似乎需要稍微调整一下 - .ui-slider-handle.ui-slider-handle { background: url('../../img/slider/slide-dot.png') !important; width:9px !important; height:9px !important; top:0px !important; border:none !important; }目前在.tiny之外。

将.border向上移动一个div然后将链接包裹在边框中。

一旦对其进行了排序，您需要在.border div附近.row。

Codepen here。

以下更新的代码：

.tiny

SCSS保持不变：

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

如何才能正确对齐anchortags？

1 个答案: