Question

我有一组显示月份的按钮，但它们都显示在一行/一行上，我想在 6 月底设置中断，以便它显示在两行上。我该怎么做？我试过 June' + '\n' 没有用，<br> 也没有用。更新了更多代码，包括来自 Vue 文件和 css 的代码。

Vue

    <common-subsection
        id="monthsSelected"
        headerTitle="Months">
        <common-forminputs-checkboxeswithvalidation
            rules="required|min:1"
            name="months"
            id="months"
            vid="months"
            :options="monthNames"
            v-model="months"
            buttons
            button-variant="primary"
            requiredDisplayName="Months"
        />
    </common-subsection>

打字稿

      months = [];
      monthNames = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',        
   ];

CSS

#months label.btn{
 margin: 0 0.25em 0 0;
 border: 1px solid #D0D0D0;
 overflow: auto;
 float: left;
 height: 43px;
 width: auto;
 padding:0;
 background-color: #fff;
 color:#656565;
 min-width:150px;

  span{
   text-align: center;
   padding: 1em;
   display: block;
   height: 100%;
   text-transform: capitalize;
   }

 &:hover{
    background: var(--secondary);
    color: #fff;
    cursor: pointer;
    }

  &.active{
  background-color: #2e81ab;
  color: #fff;
  }

}

更新代码是这样吗？如果是这样，那似乎不起作用。

<common-subsection
   id="monthsSelected"
   headerTitle="Months"
   style="display: grid; grid-template-columns: repeat(6, 1fr);">
   <common-forminputs-checkboxeswithvalidation
    rules="required|min:1"
    name="months"
    id="months"
    vid="months"
    :options="monthNames"
    v-model="months"
    buttons
    button-variant="primary"
    requiredDisplayName="Months"
 />

Answer 1

用这种样式将所有按钮包裹在标签内：

display: grid;
grid-template-columns: repeat(6, 1fr);

如何在Typescipt中为字符串添加换行符？

1 个答案: