https://codepen.io/hereiscasio/pen/QZrBpP

Used UI Component ( #2 )

#1 Text fields #2 Tabs

UI 圖來源件此

Discussion

cols='auto' 的意義代表 v-col 會設成跟其內部所囊括的元件寬度相同，而另一個 v-col 的寬度就會佔用 v-row 中的剩下的寬度（ cols='undefined'，這你可以不用寫 ）。若欲了解程式碼中的其它屬性，請直接移除該屬性看渲染結果，這樣學最快

附註：我並沒有完美處理這個背景圖在各個斷點的情況，因為那並非本系列文關注重點

<v-row no-gutters justify='center'>
    <v-col cols='undefined'>  
        <v-text-field
            class="mx-3 black--text" solo
            :label="TEXT_PLACEHOLDER" :hint="TEXT_HINT" persistent-hint
        ></v-text-field>           
    </v-col>
    <v-col cols='auto'>
        <v-btn 
            v-text='"Search"'
            large class="mt-0 mx-0" color="primary" height='48'>
        </v-btn>
    </v-col>               
</v-row>