时间戳

首页 > 解决方案 > 如何使元素响应式在左侧对齐

vue.js - 如何使元素响应式在左侧对齐

问题描述

当我尝试最小化浏览器的窗口时，我试图使元素“分支”响应完美地对齐到“状态”下方，我该怎么做？这是我到目前为止得到的结果，我也尝试使用@media only screen CSS，但仍然没有显示响应的迹象，这是我的代码行

`

<template>
  <base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1"
    />

    <template>
      <div>
        <b-form inline>
          <label for="status">Status⠀⠀⠀⠀ :</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <!-- branchstyle -->
          <div class="branch">
            <div class="col-lg-10 text-right">
              <b-form inline label-align-sm="right" style="margin-left: 70px">
                <div class="col-sm-2" label for="branch">Branch⠀:</div>
                <div class="col-sm-8">
                  <b-form-input
                    v-model="text"
                    style="margin-left: 33px"
                  ></b-form-input>
                </div>
                <br />
                <!-- <div class="input-group col-sm-2">
                  <b-button variant="outline-dark"></b-button>
                </div> -->
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <div>
        <b-form inline>
          <label for="storecode">Store Code⠀:</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <div class="branch">
            <div class="col-lg-12 text-right">
              <b-form inline label-align-sm="right">
                <div class="input-group col-sm-10">
                  <b-button
                    variant="dark"
                    style="margin-left: 205px; margin-top: 5px"
                    >Search</b-button
                  >
                </div>
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <br />
      <br />
      <b-card body>
        <b-card-header class="border-0">
          <h3 class="mb-0">Stock List</h3>
        </b-card-header>
        <div class="text-center">
          <b-table dark striped hover :items="items" :fields="fields"></b-table
          ><br />
        </div>
      </b-card>
    </template>
  </base-header>
</template>

<style></style>`

提前感谢，希望你有一个愉快的一天☺</p>

标签： vue.jsresponsive-designnuxt.jsbootstrap-vue

解决方案

我尝试模拟您的问题并实现此代码段。因为我在代码片段中看不到您的结果，所以我假设您想要一个响应式表单，当屏幕最小化时，您的输入将放在右侧部分。

我已经进行了一些清理和改进以提高可读性，并用于flex您的响应式问题。

new Vue({
  el: "#app",
  data: function() {
    return {
      text: "a",
      fields: ['first_name', 'last_name', 'age'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
});
.customForm>div {
  display: flex;
  flex: 1 0 250px;
  margin: 1rem;

}

.customForm {
  display: flex;
  flex-wrap: wrap;
}

.customForm > div > label {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form class="customForm">
    <div>
      <label>Status:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Branch:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Store Code:</label>
      <b-form-input v-model="text" />
    </div>

    <div>
    <b-button variant="dark">Search</b-button>
    </div>
  </b-form>
  <b-card body>
    <b-card-header class="border-0">
      <h3 class="mb-0">Stock List</h3>
    </b-card-header>
    <div class="text-center">
      <b-table dark striped hover :items="items" :fields="fields" />
    </div>
  </b-card>
</div>

推荐阅读