使用bootstarp

Question

我是Web开发的新手。这是我正在尝试做的

所以，我使用以下方式尝试了

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<div className="create-job-form-container">
    <form className="form-inline text-center" role="form">
        <div className="col-xs-4">
            <div className="form-group  col-xs-12">
                <label className="control-label">company/project</label>
                <select className="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div className="col-xs-4">
            <div className="form-group  col-xs-12">
                <label>Select Technology</label>
                <select className="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div className="col-xs-4">
            <div className="form-group  col-xs-12">
                <label>Job Description</label>
                    <button type="button" className="btn btn-info">Button</button>
                        Or
                    <button type="button" className="btn btn-info">Button</button>
            </div>
        </div>
    </form>
</div>

但是select元素存在问题，并且无法正常运行。那么，我在做什么错了？

为此，它是一排的。所以我将其分为三个部分。

任何提示都会有所帮助。

Answer 1

Why did you used className instead of class, Html not support to className. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<div class="create-job-form-container">
    <form class="form-inline text-center" role="form">
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label class="control-label">company/project</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label>Select Technology</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label>Job Description</label>
                    <button type="button" class="btn btn-info">Button</button>
                        Or
                    <button type="button" class="btn btn-info">Button</button>
            </div>
        </div>
    </form>
</div>

Answer 2

在引导程序d-flex justify-content-around中使用以下类。请参考下面的链接

  

https://getbootstrap.com/docs/4.0/utilities/flex/了解更多信息。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="create-job-form-container">
    <form class="form-inline text-center " role="form">
    <div class="col-xs-12 d-flex justify-content-around">
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label class="control-label">company/project</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label>Select Technology</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group  col-xs-12">
                <label>Job Description</label>
                    <button type="button" class="btn btn-info">Button</button>
                        Or
                    <button type="button" class="btn btn-info">Button</button>
            </div>
        </div>
        </div>
    </form>
</div>