Question

我是Bootstrap的新手。我已经使用CSS创建了一些形状，并希望它与浏览器一起调整大小。我已经包含了min.css。

在较大的屏幕中，它看起来像这样，我想要相同的布局

我创建了一个正方形和两个圆圈。当我调整大小时，我将它堆叠在一起。我想在移动设备的大型设备中看到相同的布局，但我不能让它缩小。

HTML：

<div id="mainpage" class="container">   
            <div class="row">

                <div class="col-md-4 col-md-offset-2" id="sqr">
                </div>  
                 <div class="col-md-3">
                    <div class="row" id="circle1"></div>
                    <div class="row" id="circle2"></div>
                </div>

            </div>

        </div>
css:

#sqr
{
    height: 400px;
    width:400px;
    background-color: red;
}
#circle1
{

    width:14em;
    height:14em;
    border-radius: 50%;
    background-color: blue;
}
#circle2
{
    width:14em;
    height:14em;
    border-radius: 50%;
    background-color: green;
}

Answer 1

如果您希望圈子调整使用宽度：100％;

let that=this;

$(this.element).find("input").keypress(function(e) {
               let character = String.fromCharCode(e.keyCode);

               let newValue =  this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length);


               if (!that.isFormatValid(newValue, that.getdecimalPoints())) {
                     e.preventDefault();
                     e.stopPropagation();
                     return false;
              }

              return true;
        });


        $(this.element).find("input").bind({
              paste: function() {
                     let _this = this;

                     setTimeout( function() {
                           let decimals = that.getdecimalPoints();
                           if (!that.isFormatValid($(_this).val(), decimals)) {                        
                                         $(_this).val('');                        
                           }
                     }, 0);                                                                                                  
                  }
           });

Answer 2

尝试删除高度和宽度的固定值。他们永远都是这么大。

检查：max-height：400px和min-height：100px / min-height：25％;

最大宽度：400像素; 最大宽度：400像素;

#sqr{
    max-height: 400px;
    max-width:400px;
    background-color: red;
}

编辑：检查你是否正确连接了bootstrap css / js。

<div class="border row">
<div class="border col-sm-6">
<div id="circle1"></div>
</div>
<div class="border col-sm-6">
<div id="circle2"></div>
</div>   
</div>

AND js小提琴： jsfiddle.net/cxcgL5s1

使用浏览器调整CSS形状元素的大小

2 个答案: