【问题标题】:input type text at center occupying the full width在中心输入类型文本占据整个宽度
【发布时间】:2017-09-14 07:35:19
【问题描述】:

你知道如何让文本输入占据 col-md-7 div 的整个宽度并定位在红色 div 的中心(使用引导程序)吗?

示例:https://jsfiddle.net/nmdv2nj0/

html:

<div class="container" style="background-color:red; padding:20px 0;">
<div class="row">
   <div class="col col-md-7" style="background-color:yellow;">
    <form class="form-inline">
      <input type="text" class="form-control input-lg" id="inlineFormInputName2" placeholder="Jane Doe"/>
    </form>

</div>

</div>

</div>

【问题讨论】:

    标签: css


    【解决方案1】:
    <div class="row justify-content-center">
    

    会解决你的问题。

    我添加了jsfiddlle:

    https://jsfiddle.net/nmdv2nj0/5/

    忘了提 - 您还需要删除该表单内联类

    【讨论】:

    • 也许他需要 'form-inline' 类来输入另一个输入,所以,你的解决方案将不起作用
    【解决方案2】:

    只需在&lt;input type="text" id="inlineFormInputName2" /&gt; 中添加width:100%!important;

    Update jsfiddle

    #inlineFormInputName2{
      width:100%!important
    }
    

    【讨论】:

    • !important 总是坏主意。
    • id 不需要重要。
    【解决方案3】:

    将这样的类添加到输入中

    .w-l{
      width: 100% !important;
    }
    

    如果你看到你的 CSS,'.form-inline' 将使子 '.form-control' 项目具有 'width:auto'

    @media (min-width: 576px){
        .form-inline .form-control {
            display: inline-block;
            width: auto;
            vertical-align: middle;
        }
    }
    

    所以,解决方案是强制输入为全宽

     <input type="text" class="form-control input-lg w-l"
    

    【讨论】:

    • 你永远不应该使用 !important,除非它真的很重要 :)
    • 它必须是 '!important',因为 bootstrap 会覆盖 '.w-l' 类,除非他将自定义 CSS 放在 bootstrap 之后,否则它必须是 '!important! :)
    • 检查我为此编写的解决方案,他使用的是引导程序 4,因此他需要以正确的方式解决它!重要总是解决方法。
    • 您刚刚从“form”标签中删除了“form-inline”类,这就是您的解决方案有效的原因,因为“form-control”是 100% 宽度,但不在“form-inline”内'
    • form-inline 应该是用来在一行显示多个元素的,他只有一个元素,自然不需要。有关更多信息,请查看文档:v4-alpha.getbootstrap.com/components/forms
    猜你喜欢
    • 2012-07-04
    • 2020-11-04
    • 2018-11-07
    • 2012-04-15
    • 1970-01-01
    • 2010-11-11
    • 2021-01-30
    • 2013-08-28
    • 1970-01-01
    相关资源
    最近更新 更多