html - Bootstrap 不适合个别类(class)

Question

image

所以我的文字在左边，我的表格在右边。这正是我想要的，但一切都不在我的超大屏幕上。
我在下面列出了我的 HTML 和 CSS 代码。请审核。

<div class = "jumbotron">

    <div class = "cmpnt"><h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1><h5> A safe social network <br>for <b>Everyone.</b><br>Build your Online presence <br>from the ground up.<br></h5></div>

    <div  class="cmpnt" >
        <h3>Sign Up</h3>
        <form id = "signup" action="/signAction" method="POST"  >
            <input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />


        <div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
            Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" /> </div> </div> <div id="div_id_password" class="control-group"> <label for="id_password" class="control-label requiredField">
            Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password" placeholder="We won&#39;t sell it" class="textinput textInput" required id="id_password" /> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label requiredField">
            Email Id<span class="asteriskField">*</span> </label> <div class="controls"> <input type="email" name="email" class="emailinput" required id="id_email" /> </div> </div>

                <br>
                <input type="submit" class="btn btn-info" value="Submit">

        </form>

        <p>Already have an account?<a href="login">Login</a> </p>
    </div> 
    </div>

CSS-

html,body{
    overflow-x:hidden;
    width:100%;
    height: 100%;
    font-family: "Open Sans"
}
.jumbotron{
    background-color:#23103a;
    color:#FF6C00;

}
 .cmpnt{
    float:left;

}

.btn{
    background-color: #a0204c;
    border-color:#a0204c;
}

~提前致谢

Answer 1

这是你想要的吗？？

html, body {
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	font-family: "Open Sans"
}
.jumbotron {
	background-color: #23103a;
	color: #FF6C00;
}
.cmpnt {
	float: left;
}
.btn {
	background-color: #a0204c;
	border-color: #a0204c;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class = "jumbotron clearfix">
    <div class="container">
        <div class = "cmpnt">
            <h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1>
            <h5> A safe social network <br>
                for <b>Everyone.</b><br>
                Build your Online presence <br>
                from the ground up.<br>
            </h5>
        </div>
        <div  class="cmpnt" >
            <h3>Sign Up</h3>
            <form id = "signup" action="/signAction" method="POST"  >
                <input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
                <div id="div_id_username" class="control-group">
                    <label for="id_username" class="control-label requiredField"> Username<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" />
                    </div>
                </div>
                <div id="div_id_password" class="control-group">
                    <label for="id_password" class="control-label requiredField"> Password<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="password" name="password" placeholder="We won&#39;t sell it" class="textinput textInput" required id="id_password" />
                    </div>
                </div>
                <div id="div_id_email" class="control-group">
                    <label for="id_email" class="control-label requiredField"> Email Id<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="email" name="email" class="emailinput" required id="id_email" />
                    </div>
                </div>
                <br>
                <input type="submit" class="btn btn-info" value="Submit">
            </form>
            <p>Already have an account?<a href="login">Login</a> </p>
        </div>
    </div>
</div>