小编tem*_*emp的帖子

我已经为我的输入文件做了一个浮动标签,如下所示.它的工作正常.但是当我删除那个required输入字段时,浮动标签不起作用(虽然我不需要该字段required).请提出一些解决此问题的方法.

input:focus~.floating-label,
input:not(:focus):valid~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}

<input type="text" id="floating_name" value="" required/>
<span class="floating-label">Enter</span>

我已经使用 Bootstrap div 制作了下表，但它对移动设备不响应​​。我已经使用了 col-xs，但列在移动视图中仍然相互合并。是否有其他方法使此代码响应移动设备？

<div class="container" style="color: grey; padding-top: 40px">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-xs-12" style="border-bottom: 1px solid #eee;">

                <div class="col-md-6 col-xs-4">
                    <span>Item</span>
                </div>

                <div class="col-md-1 col-xs-1">
                    <span>Price</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Quantity</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Total</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Delivery Charge</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Discount</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Subtotal</span>
                </div>
            </div>


         </div>

</div>

    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-6 col-xs-6">
                <div class="col-md-5 col-xs-5">
                <img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
                </div>
            <div class="col-md-7 col-xs-7 "> …