【问题标题】:Bootstrap select options are wider than input引导选择选项比输入更宽
【发布时间】:2017-09-27 01:11:23
【问题描述】:

我不知道为什么,但是在 1024 x 768 尺寸的屏幕上,我的选择选项太大了。我怎样才能做到这一点,使这个选项像选择一样宽度? 我只想在 bootstrap 4 上执行此操作,并且只使用 bootstrap 中的类,但我不知道或者它是可能的,我不知道为什么这个选择会这样。在更大的屏幕尺寸上一切正常。 如何解决? 这是我的代码:

  <div class="row">
        <div class="col-sm-6" style="border: 1px solid black">
            <span class="font-weight-bold">Data</span>
                <form role="form">
                    <div class="form-group">
                    <label class="control-label">Choose</label>
                    <select class="form-control" name="docType">
                        <option value="paragon">Test1</option>
                        <option value="complaint">Test2</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="docNo">Data</label>
                        <input type="text" class="form-control" id="docNo">
                    </div>
                    <div class="form-group">
                        <label for="docDate">Data</label>
                        <input type="text" class="form-control" id="docDate">
                    </div>
                </form>
        </div>
      <div class="col-sm-6">
       Test            
      </div>
    </div>

【问题讨论】:

  • 您是否使用其他样式文件?我修改了您的代码并引用了引导程序,它看起来不错,我没有发现任何问题。 “选择的选项如此之大”到底是什么意思。你真正需要什么? jsfiddle.net/bocanegra_carlos/wt1nLnhs
  • 您引用的文件是什么?您是否使用引导程序建议的所有参考资料? v4-alpha.getbootstrap.com/getting-started/introduction/…
  • 我已经编辑了我工作的特定屏幕尺寸的问题所在。是的,我使用 bootstrap 4。这些 slect 选项非常广泛

标签: html css twitter-bootstrap


【解决方案1】:

您的 CSS 中是否存在强制选项为静态像素大小而不是允许引导程序的宽度为自动的内容?

【讨论】:

  • 我不这么认为。这是我第一次使用 bootstrap 4,我的项目中没有任何东西不使用选择。
【解决方案2】:

即使你使用 bootstrap,options 标签通常也不会显示大的选项,但是你可以尝试使用下面的 css 代码来调整 html 中所有表单元素的宽度。

.form-control
  {
    width:90%;
  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-25
    • 1970-01-01
    相关资源
    最近更新 更多