Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/ruby-on-rails-3/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 不同设备底部的按钮组_Html_Css_Button_Mobile_Device - Fatal编程技术网

Html 不同设备底部的按钮组

Html 不同设备底部的按钮组,html,css,button,mobile,device,Html,Css,Button,Mobile,Device,我正在做一个手机设计,我必须在不同的设备上思考。我在页面底部放了一个按钮组。这意味着Botton出现在滚动条的最后。但是,当页面因为设备太大而太小时,botton会出现在页面的中间。在那之后,是空白。 我尝试使用这个规则:但是按钮总是出现在屏幕的底部。使用滚动条后,我需要查看按钮 HTML <div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">

我正在做一个手机设计,我必须在不同的设备上思考。我在页面底部放了一个按钮组。这意味着Botton出现在滚动条的最后。但是,当页面因为设备太大而太小时,botton会出现在页面的中间。在那之后,是空白。 我尝试使用这个规则:但是按钮总是出现在屏幕的底部。使用滚动条后,我需要查看按钮

HTML

<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
            <span><img class="icons" src="imagenes/llave.png"></span> Hardware
        </button>
    </div>

    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
            <span><img class="icons" src="imagenes/valija.png"></span> Cerrar WO
        </button>
    </div>
</div>
有人能帮我吗?
真的非常感谢,我要给明星一个最好的答案。

试试这个……你提供的代码不够,所以我临时编了一点。但如果这是你需要的,请告诉我

CSS:

body{
    height:900px;
    position:relative;
}

.btn-group {
    position: absolute;
    width:100%;
    bottom:0
}

.btn-group div {
    display:inline;
}
HTML:

<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
    <div role="group">
        <button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
            <span><img class="icons" src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"></span> Hardware
        </button>
    </div>

    <div role="group">
        <button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
            <span><img class="icons" src="https://pbs.twimg.com/profile_images/3540744128/7dd80644ae052f1b04180c41bbc674ab.png"></span> Cerrar WO
        </button>
    </div>
</div>

硬件
塞拉沃酒店

我试过了,但没用。这是问题的屏幕截图:您可以共享整个代码吗?也许可以在codepen.io或jsfiddle中复制它,因为我需要查看整个树才能了解它发生的原因或者我删除了以前的笔。。。在这里它又是好的,所以也许你需要增加高度:100%到外部容器…也许其中一个容器就在那里结束,所以它确实在底部,除了父容器没有扩展整个高度。我不能放完整的代码,因为有一个js负责这部分,另一个负责下面的部分,还有另一个。。。这是我现在正在编辑的一个老项目。我试着用你的方法,但没用(
<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
    <div role="group">
        <button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
            <span><img class="icons" src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"></span> Hardware
        </button>
    </div>

    <div role="group">
        <button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
            <span><img class="icons" src="https://pbs.twimg.com/profile_images/3540744128/7dd80644ae052f1b04180c41bbc674ab.png"></span> Cerrar WO
        </button>
    </div>
</div>