小编use*_*ent的帖子

我在代码段显示时成功创建了一个响应式网格.

此刻,我看到盒子左边对齐了.

如何在不使用填充的情况下将容器放在页面的中心？

我尝试使用margin:auto但它没有用.

.container{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;
}
.box{
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;
}
@media only screen and ( max-width:768px ){	
    .box{
        width:100%;
        max-width:40%;
        border:1px solid red;
    }
}

<section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS小提琴.

我安装了 High Sierra，它带有 php 7.1。在环境中，我最终能够升级到 php7.2，但无法记录它，所以我不完全知道我做了什么。现在，我正在尝试切换到 php 7.3

使用 brew，我运行了以下命令：

brew unlink php@7.2

brew services install php@7.3

brew link php@7.3

如果我重新启动终端并检查 php 版本：

php -v

我仍然看到 7.2.25 版本而不是我想要的 7.3

我也试图与一个节点包，我在这个环节发现这里，但没有成功。

如何在php版本之间成功切换？

在这个布局中,我有3个响应的图像,一个接一个地显示.但是当我尝试创建一个图像滑块时,理想情况下我只想要显示一个图像,其余图像将隐藏在该图像后面.我的html:

<header>
    <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
    <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
</header>           
<!------------Navigation area--------------------------->
<div class="logo">
    <img src="" alt="Image">
</div>
<nav>
    <ul class="topnav">
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">?</a>
        </li>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#"> ABOUT</a></li>
        <li><a href="#">CONSULTING SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>         
<!------------Slide Section---------------------------->              
<section id="slider">
    <img src="image/291H.jpg" alt="Important Images">
    <img src="image/305H.jpg" alt="PIGS">
    <img src="image/251H.jpg" alt="ROADS will be here">
</section>

滑块部分和图像的css代码是这样的:

img{
    width:100%;
}
#slider{
    width: 100%;
    overflow:hidden;
}

如何解决这个问题并保持响应能力？

除了自动完成搜索之外，我还想添加功能以允许使用VueJ进行按键向下/向上功能

我的模板如下所示：

<div id="app">
  <h2>Todos:</h2>
  <div class="autocomplete">
    <input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrowDown"/>
     <ul
       v-for="(user, i) in filteredUsers" 
       :key="i"
       class="autocomplete-results" 
       v-show="isOpen"
       :class="{ 'is-active': i === arrowCounter }"
     >
       <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
  </div>
</div>

在脚本中，我具有以下内容：

new Vue({
  el: "#app",
  data: {
    users: [
      { id: 1, text: "Learn JavaScript", done: false },
      { id: 2, text: "Learn", done: false },
      { id: 3, text: "Play around in JSFiddle", done: true },
      { id: 4, text: "Build something awesome", done: true …

我刚刚创建了一个导航栏和一个悬停功能.但现在的问题是,当我将鼠标悬停在HOME,BEDROOMS和CONTACT US上时,颜色在导航栏上从上到下完全没有效果......但在其他人身上(例如:设施服务)颜色有充分的效果.

HTML

<nav class="navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav" style="padding-top:10px">
        <li><span class="details"><strong>Phone</strong> </span><span           class="contacts">021 913 0643</span></li>
        <br/>
        <span class="details"><strong>Email</strong> </span> <a     class="contacts" href="#">info@acaciahouse.co.za </a>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#"><span ></span>Home</a></li>
        <li><a href="#"><span ></span> FACILITIES<br/>
          SERVICES</a></li>
        <li><a href="#">BEDROOMS</a></li>
        <li><a href="#">RATEs <br/>
          & BOOKINGS</a></li>
        <li><a href="#">SURROUNDING<br/>
          ATTRACTIONS</a></li>
        <li><a href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar{
    padding: …

我的 search.php 页面如下所示：

get_header(); ?>
<div class="search_result_page">
<section class="content-area">
    <?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    if ( have_posts() ) : ?>
        <header class="results_heading">
            <h6 class="rsults_title"><?php printf( esc_html__( 'Search Results for: %s', 'satsco' ), '<span class="search_query">' . get_search_query() . '</span>' ); ?></h6>
        </header><!-- .page-header -->
        <div id="result_search">
        <?php
        /* Start the Loop */
        while ( have_posts() ) : the_post();

            get_template_part( 'template-parts/content', 'search' );

        endwhile;?>
        </div>
        <?php
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif; ?>
</section><!-- #primary …

我试图像照片一样做但我真的不知道该怎么做

因此,我应该可以在中间使用任何有趣的图标.

这是我最初的标记:

<h1>Welcome</h1>

h1 {
    font-size: 25pt;
    display: inline-block;
    margin: 0;
    font-weight: 300;
}
h1:after {
    content: '\f209';
    font-family: FontAwesome;
    display: block;
}

在这里,我的小提琴

希望你能帮忙.

我该怎么做下面的图片呢？

我希望我的所有h1都有一条额外的粗线,但我不太确定这样做的最佳做法.

HTML:

<h1>This is Our Work</h1>

CSS:

h1{
  border-bottom: 1px solid #246cb4;
  display: inline-block;
}

h1:after {
  content: "";
  display: block;
  border: 1px solid black;
  width: 50px;
  margin-top: 0px;
  position: absolute;
}

Codepen:

我基本上试图创建这个:

添加了具有背景图像的父容器,然后添加了需要透明的子容器.

这是我的HTML:

<div class="scent-brand-contact">
    <div class="scent-brand-container">               
       <section id="black-studio-tinymce-8" class="widget-1 widget-first widget-odd widget widget_black_studio_tinymce">
            <div class="textwidget">
                <p>All our fragrances are developed in compliance with the International Fragrance Association ensuring strict adherence to safety purity and manufacturing standards.</p>
                <p>LEARN MORE ABOUT HOW SCENT BRANDING CAN BENEFIT YOUR BUSINESS</p>
            </div>
        </section>
        <section id="text-4" class="widget-2 widget-last widget-even widget widget_text">
            <div class="textwidget">
            <button type="button">contact us today</button>
            </div>
        </section>                    
   </div>
</div>

而CSS:

.scent-brand-contact{
    position:relative;
    background-image: url(images/lemon.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height:380px;
} …

如何使用vuejs在表格中显示用户名？

我有我的用户和帖子表与关系集.用户有很多帖子,帖子属于用户.

在我的Posts.vue模板中,我现在可以显示post表数据:

<tr v-for="post in posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body | snippet }}</td>
</tr>

脚本如下所示:

<script>
    export default {
        data(){
            return{
                posts: []
            }
        },

        methods: {
            showPosts(){
                axios.get('/app/posts').then(response => {
                    this.posts = response.data.posts;
                });
            }
        },
       mounted(){
            this.showPosts();
       }
    }
</script>

我的PostController在索引函数中看起来像这样

 public function index()
 {
    //
    $posts = Post::all();
    return response()->json([
        'posts' => $posts,
    ], 200);
 }

由于我在posts表中有user_id,如何使用vuejs在我的表中显示用户名？