响应式引导网格，按钮被覆盖

时间：2016-12-19 12:55:08

标签： html html5 twitter-bootstrap grid

很抱歉很长的代码。我有81个按钮放在网格中。我面临的问题是，左侧的按钮被“吃掉”到移动版本的某些扩展中，我找不到原因。请看图片：

mobile image

第二个问题是。为什么一组按钮之间有空格？我总是确保填充和边距设置为0px！重要。非常感谢您的帮助

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-xs-4" style="padding:0px !important;">
        <div class="row" style="margin:0px !important;"></div>
    
    	<div class="col-md-12 col-xs-12">
            <div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
        </div>
    	
    </div>
    <div class="col-md-4 col-xs-4" style="padding:0px !important;">
        <div class="row" style="margin:0px !important;"></div>
    
    
    
    
    	<div class="col-md-12 col-xs-12">
            <div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
        </div>
    	
    </div>
    <div class="col-md-4 col-xs-4" style="padding:0px !important;">
        <div class="row" style="margin:0px !important;"></div>
    
    
    
    
    	<div class="col-md-12 col-xs-12">
            <div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
    		<div class="row" style="margin:0px !important;">
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-10 col-xs-10" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
                <div class="col-md-1 col-xs-1" style="padding:0px !important;">
                    <button class="btn btn-default btn-block" type="button"></button>
                </div>
            </div>
    		
    		
        </div>
    	
    </div>

1 个答案:

答案 0 :(得分：1)

因为列小于内容。 此外，您将填充设置为0（在3＆＃39;主列和＃39;列之间），设置边距，这就是您拥有空格的原因。

相关问题
最新问题