Soh3illl
5 سال پیش توسط Soh3illl مطرح شد
2 پاسخ

مشکل در نمایش استایل ها

سلام به همگی دوستان
من یه فرم برای ایجاد مقالات پروژه ام درستم که به صورت زیر هستش.

@extends('Admin.master')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>ایجاد مقاله</h1>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <div class="card card-primary card-outline">
        <div class="card-body">
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-sm-12">
                        <form class="form-horizontal" action="{{ route('articles.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label for="title" >عنوان مقاله</label>
                                    <input type="text" class="form-control" name="title" id="title" placeholder="عنوان را وارد کنید" value="{{ old('title') }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label for="description" >توضیحات کوتاه</label>
                                    <textarea rows="5" class="form-control" name="description" id="description" placeholder="توضیحات را وارد کنید">{{ old('description') }}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label for="body" >متن</label>
                                    <textarea rows="5" class="form-control" name="body" id="body" placeholder="متن مقاله را وارد کنید">{{ old('body') }}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label for="images" >تصویر مقاله</label>
                                    <input type="file" class="form-control" name="images" id="images" placeholder="تصویر مقاله را وارد کنید" value="{{ old('imageUrl') }}">
                                </div>
                                <div class="col-sm-6">
                                    <label for="tags" >تگ ها</label>
                                    <input type="text" class="form-control" name="tags" id="tags" placeholder="تگ ها را وارد کنید" value="{{ old('tags') }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn-danger">ارسال</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
    </div>
@endsection
@section('script')
    <script src="/js/ckeditor-full/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('body');
    </script>
@endsection

تنها مشکلی که دارم اینکه توی قسمت آخر بخش تگ ها و آپلود تصویر کنار هم دیگه قرار نمی گیرن و یه چیزی مثل عکس زیر در میاد.
http://s10.picofile.com/file/8393175350/problem.PNG
یه نکته ی دیگه اینکه از laravel mix استفاده کرم و بعد دستور npm run watch هم بدون هیچ ارروی و با موفقیت کارش رو انجام داد.
کد زیر هم کد فایل bootstrap.js هستش.

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('jquery-ui');
    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

ثبت پرسش جدید
Mohammad Amin Mokhtari
تخصص : برنامه نویس
@amin.mokhtari94 5 سال پیش آپدیت شد
1

سلام
در خط اول گروه فرم زیر کلاس row رو اضافه کنید، بدین صورت:

<div class="form-group row">  {{--HERE--}}
    <div class="col-sm-6">
        <label for="images">تصویر مقاله</label>
        <input type="file" class="form-control" name="images" id="images" placeholder="تصویر مقاله را وارد کنید" value="{{ old('imageUrl') }}">
    </div>
    <div class="col-sm-6">
        <label for="tags">تگ ها</label>
        <input type="text" class="form-control" name="tags" id="tags" placeholder="تگ ها را وارد کنید" value="{{ old('tags') }}">
    </div>
</div>

Soh3illl
تخصص : برنامه نویس php
@soh3illl 5 سال پیش مطرح شد
1

@amin.mokhtari94
سلام
خیلی ممنون
مشکلم حل شد.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام