使内容在buddypress登录小部件中水平显示

Question

我将Buddypress登录小部件放在标题中，但它有一个垂直布局，而我希望它可以水平显示。 This is what I mean

我希望密码部分旁边有用户名部分，而其余部分旁边是水平布局（因为它是一个标题栏，我不希望它很大）。

这是实际代码：

var gulp = require('gulp'),
  watch = require('gulp-watch'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  stylish = require('jshint-stylish'),
  sass = require('gulp-sass'),
  rename = require("gulp-rename"),
  minifyCss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  concat = require('gulp-concat'),
  plumber = require('gulp-plumber'),
  concatCss = require('gulp-concat-css'),
  jade = require('gulp-jade');

// Jade
gulp.task('jade', function(){
 gulp.src('app/*.jade')
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest('./dist/'));
});

//Sass to dist
gulp.task('sass-dist', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(gulp.dest('dist/sass/'));
});

// compiled sass
gulp.task('sass', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 10 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css/'))
    .pipe(minifyCss())
    .pipe(rename({suffix: ".min",}))
    .pipe(gulp.dest('dist/css/'));
});

// Merge all css files in one
gulp.task('css', function(){
  return gulp.src('app/css/*.css')
    .pipe(concatCss("all-pluging.css"))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css'));
});

// minify images
gulp.task('images', function(){
  return gulp.src('app/images/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});
gulp.task('images-content', function(){
  return gulp.src('app/assets/images/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/images'));
});

gulp.task('jshint', function(){
  return gulp.src('app/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter(stylish))
});

// Merged all js files in one
gulp.task('concat', function() {
  return gulp.src(['app/js/jquery/*.js','app/js/lib/*.js'])
    .pipe(uglify())
    .pipe(concat('all-plugins.js'))
    .pipe(rename("all-plugins.min.js"))
    .pipe(gulp.dest('dist/js/'));
});



gulp.task('js',function(){                
  gulp.src('app/js/main.js')
    .pipe(plumber())
    .pipe(gulp.dest('dist/js/'))
    .pipe(uglify()) 
    .pipe(rename("main.min.js"))
    .pipe(gulp.dest('dist/js/'));
});


gulp.task('watch', function(){
  gulp.watch('app/*.jade',['jade']);
  gulp.watch('app/sass/*.scss', ['sass-dist','fonts','sass'] );
  gulp.watch('app/assets/images/**/*.*', ["images-content"]);
  gulp.watch('app/images/*.*', ["images"]);
  gulp.watch("app/css/**/*.css", ["css"]);
  gulp.watch('app/js/**/*.js',  ["jshint", "concat", "js"]);
});

// Default
gulp.task('default', ['jade',"sass-dist","sass",'css','fonts',"jshint",'concat','js','images','images-content', "watch"]);

我有机会添加custon CSS，但我不知道这是否可以通过CSS实现。通过使用：

我能够达到某种结果

<aside id="bp_core_login_widget-7" class="widget widget_bp_core_login_widget buddypress widget clearfix"><h3 class="widget-title"></h3>


        <form name="bp-login-form" id="bp-login-widget-form" class="standard-form" action="https://www.example.com/wp-login.php" method="post">
            <label for="bp-login-widget-user-login">Username</label>
            <input type="text" name="log" id="bp-login-widget-user-login" class="input" value="">

            <label for="bp-login-widget-user-pass">Password</label>
            <input type="password" name="pwd" id="bp-login-widget-user-pass" class="input" value="" spellcheck="false" autocomplete="off">

            <div class="forgetmenot"><label for="bp-login-widget-rememberme"><input name="rememberme" type="checkbox" id="bp-login-widget-rememberme" value="forever"> Remember Me</label></div>

            <input type="submit" name="wp-submit" id="bp-login-widget-submit" value="Log In">


                <span class="bp-login-widget-register-link"><a href="https://www.example.com/register/">Register</a></span>



        </form>


    </aside>

但问题是，在您登录后，用户图像和名称取代了登录表单，它们也被划分为3列。