html - 列采用 Bootstrap 中最小设备的大小

标签 html css twitter-bootstrap

bootstrap 中的列始终采用最小的集合大小,而不是采用适当设备宽度的大小。这导致我的所有输入在导航器中都是全尺寸的,而不是像我的代码应该做的那样分别是 3/4 - 1/4。所有其他样式元素都可以正常工作。

这是我的代码:

<!DOCTYPE html>
<html>  
    <?php include("head.php");?>

    <body>
        <?php include("nav.php");?>

        <form method='post'>
            <h2 class='sr-only'>Informations d'entreprise</h2>
            <div class='row'>
                <div class='col-md-9 col-xs-12'>
                    <div class='form-group'>
                        <input class='form-control' name='entreprise' type='text' placeholder="Nom de l'entreprise" />
                    </div>
                </div>
                <div class='col-md-3 col-xs-12'>
                    <div class='form-group'>
                        <input class='form-control' name='telephone' type='tel' placeholder="Numéro de téléphone" />
                    </div>
                </div>
            </div>  
        </form>

        <?php include("footer.php");?>
    </body>
</html>

感谢任何能帮助我的人。

最佳答案

这里是解决方案 https://jsfiddle.net/6apc4h7s/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form method='post'>
    <h2 class='sr-only'>Informations d'entreprise</h2>
    <div class='row'>
        <div class='col-xs-12 col-md-9'>
            <div class='form-group'>
                <input class='form-control' name='entreprise' type='text' placeholder="Nom de l'entreprise" />
            </div>
        </div>
        <div class='col-xs-12 col-md-3'>
            <div class='form-group'>
                <input class='form-control' name='telephone' type='tel' placeholder="Numéro de téléphone" />
            </div>
        </div>
    </div>  
</form>

您应该始终按照设备从小到大的顺序指定类。

像下面的代码:

<div class='col-xs-12 col-md-3'>

关于html - 列采用 Bootstrap 中最小设备的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45169095/

相关文章:

python - 在 Python 中将 html 标签添加到 XML.ElementTree 元素的文本

javascript - PopUp 没有出现在按钮下方

html - DIV 与另一个 DIV 的问题

html - 电子邮件中的CSS类

javascript - 保持文本区域调整大小的比例

html - 垂直居中对齐 Bootstrap 响应式网格

html - 向 Bootstrap Carousel 添加顶层

javascript - 如何实现关灯效果

css - 如何更改 Bootstrap 4 导航栏按钮图标颜色?

javascript - 更改文本 onclick 并将其他更改恢复为默认值?