【问题标题】:bootstrap take full width for select drop downbootstrap 为选择下拉选择全宽
【发布时间】:2018-04-25 05:15:08
【问题描述】:
<div align="center" class="form-group">

    <select v-model="subject" class="form-control">
      <option v-for="n in papertypes" class="">{{ n.type }}</option>

    </select>
    <br>

默认情况下,Bootstrap 采用选择下拉菜单的全宽。 我希望将其设置为获得所需的宽度。 我如何做到这一点?

【问题讨论】:

    标签: css bootstrap-4


    【解决方案1】:

    w-auto 类添加到.form-control

    <div align="center" class="form-group">
        <select v-model="subject" class="form-control w-auto">
          <option v-for="n in papertypes" class="">{{ n.type }}</option>
        </select>
        <br>
    

    【讨论】:

      【解决方案2】:

      您可以为选择添加“自定义选择”类。

      <div align="center" class="form-group">
      <select v-model="subject" class="custom-select">
        <option v-for="n in papertypes" class="">{{ n.type }}</option>
      </select>
      

      【讨论】:

        【解决方案3】:

        您可以通过为特定类指定宽度来实现它,例如

        <div align="center" class="form-group">
          <select v-model="subject" class="form-control">
            <option v-for="n in papertypes">{{ n.type }}</option>
          </select>
        </div>
        
        
        .form-group select.form-control {
          display: inline-block;
          width: 300px;
        }
        

        查看codepen 链接

        另外请注意align 属性在 HTML5 中已弃用。因此,如果您想将内容对齐到中心。 Bootstrap 有这方面的课程。就像 Bootstrap3 中的 text-center 一样,我们在 Bootstrap4 中也有 justify-content-center

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-02-20
          • 2017-10-29
          • 1970-01-01
          • 2015-09-02
          相关资源
          最近更新 更多