CODE

Question

我在将桌面ui适应移动时遇到问题。当我从桌面设置col-md值时，组件会根据col-md的值调整大小，但是当我将col-sm属性添加到这些相同的组件时，移动端没有任何变化。

我正在使用bootstrap 3

图像会更好地解释。

CODE

<div id='main' class="container" ng-controller="searchController">
        <div class="row" id='tags'>
            <div class="col-md-3 col-sm-2" style="display:inline-block">
                <h4>Images</h4>
            </div>
            <div class="col-md-3 col-sm-2" style="display:inline-block">
                <h4>Name</h4>
            </div>
            <div class="col-md-2 col-sm-2" style="display:inline-block">
                <h4>Type</h4>
            </div>
            <div class="col-md-2 col-sm-2" style="display:inline-block">
                <h4>Price</h4>
            </div>
            <div class="col-md-1 col-sm-1" style="display:inline-block">
                <h4>Cart</h4>
            </div>
            <div class="col-md-1 col-sm-1" style="display:inline-block">
                <h4>Wishlist</h4>
            </div>

        </div>
        <hr>
        <div ng-repeat="result in results" ng-controller="buttonController">

            <div class="row">

                <div id='image' class="col-md-3 col-sm-3">
                    <img ng-src="{{result.image}}" style="max-width: 100%;max-height: 100%;">
                </div>

                <div class="col-md-3 col-sm-1">
                    <a ng-href='/product/{{result.id}}'>
                        <h3>{{result.name}}</h3>
                    </a>
                </div>
                <div class="col-md-2 col-sm-2" style="display:inline-block">
                    <h5 style="margin-top:30px">{{result.category}}</h5>
                </div>
                <div class="col-md-2 col-sm-2">
                    <h5 style="margin-top:30px">{{result.price}} {{result.currency}}</h5>
                </div>
                <div class="col-md-1 col-sm-1" style="display:inline-block">
                    <button ng-click='addBasket(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </button>
                </div>

                <div class="col-md-1 col-sm-1" style="display:inline-block">
                    <button ng-click='addWishlist(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
                        <span class="glyphicon glyphicon-star"></span>
                    </button>
                </div>

            </div>

            <div class="col-md-6 alert alert-info ng-cloak" style="float: none;  margin: 0 auto;" ng-show="basketAlert">
                <strong>Confirm!</strong> This product has been added to your basket.
            </div>

            <div class="col-md-6  alert alert-info ng-cloak" style="float: none;  margin: 0 auto;" ng-show="wishlistAlert">
                <strong>Confirm!</strong> This product has been added to your wishlist.
            </div>

            <div class="col-md-6  alert alert-warning ng-cloak" style="float: none;  margin: 0 auto;" ng-show="alreadyInBasketAlert">
                <strong>Hey!</strong> This product is already in your basket.
            </div>

            <div class="col-md-6 alert alert-warning ng-cloak" style="float: none;  margin: 0 auto;" ng-show="alreadyInWishlistAlert">
                <strong>Hey!</strong> This product is already in your wishlist.
            </div>
            <hr>
        </div>

我不太擅长HTML页面。感谢。

Answer 1

根据我在Bootstrap 3 docs中看到的内容，您需要使用col-xs，因为您的定位移动设备（宽度<768px）。 HTML看起来像这样。我用col-xs替换了col-sm。：

SqlDataAdapter SDA = new SqlDataAdapter("Select Name,Phone from "+textBox2.Text+"' where Name='" + textBox1.Text + "' ", con);
        DataTable dt = new DataTable();
        SDA.Fill(dt);
        if (dt.Rows.Count == 1)
        {
            textBox3.Text = (dt.Rows[0][0].ToString());
        }

Col-Sm对页面无效

CODE

1 个答案: