声明 这是我在求职面试中克隆现有网站的一项任务，我不打算做广告只是为了解决我的问题。
您好，我获得了复制目标网页的任务。我被指示使用库bootstrap-flipped和bootstrap-rtl，据说它们支持bootstrap v3。这就是我使用旧版Bootstrap的原因。
我的问题是页面中间的表单应该是从775px宽度的最小断点向上内嵌到最大宽度。 然而，表格开始从1399px的宽度向下推动元素向下。
如何将表格保持内联直到media-width 775px的断点？
这是tset网站的链接，因为我无法将图片上传到jsfiddle：https://testallon.000webhostapp.com/
$(document).ready(function() {
/* CHECKING IF TH FORM IS FULL. KEYUP IS USED AS IT CATCHES THE TEXT CHANGE ON THE SPOT*/
$(':submit').prop('disabled', true);
$('input').on('keyup', isFull);
$('select').on('change', isFull);
function isFull() {
if ($(':input[name="fullName"]').val().length > 0 && $(':input[name="phoneNumber"]').val().length > 0 && $(':input[name="club"]').val() != null) {
$(':submit').prop('disabled', false);
} else {
$(':submit').prop('disabled', true);
}
}
$('#subscribe').submit(function(e) {
e.preventDefault();
window.location.href = 'thankyou.html';
});
});body,
html {
height: 100% !important;
color: #fff !important;
font-family: 'Rubik', sans-serif !important;
}
h5 {
font-size: 1.5em;
font-weight: 600;
padding: 0;
margin: 0;
}
.container-fluid {
background-color: black;
background-position: 30% 30%;
background-repeat: no-repeat;
background-size: cover;
}
.row {
padding: 3% 0;
}
.description {
padding: 0;
margin: 0;
}
.training-images {
margin: 5% auto;
}
div.container-fluid form input[disabled] {
background-color: #d9534f;
opacity: 0.7;
border: none;
cursor: initial;
}
#five-personal {
font-size: 3.7em;
font-weight: 900;
}
#location-creative {
font-size: 2.7em;
font-weight: 700;
line-height: 1.2em;
}
#call-for-action {
font-size: 2.4em;
font-weight: 600;
margin-bottom: 0;
padding-bottom: 0;
}
#locations {
font-size: 1.3em;
font-weight: 400;
}
#conditions {
font-size: 1.28em;
}
@media only screen and (min-width: 776px) {
body {
background-color: black;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%
}
.container-fluid {
background: transparent;
margin: auto 15%;
}
.row {
padding: 1% 0;
}
input.form-control, select.form-control{
width: 30px;
}
div.form-group{
width: auto;
}
#dropdown{
width:10%;
}
#locations {
width: 98vw;
right: calc(-49vw + 50%);
font-size: 1.2em;
font-weight: 400;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title> חדר כושר הולמס פלייס וגו אקטיב - רשת מועדוני כושר בפריסה ארצית</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-flipped.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12">
<img src="assets/images/logo1.png" class="img-responsive center-block" alt="logo" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 text-center">
<h2 id="five-personal">
<span>5 אימונים אישיים במתנה למצטרפים</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 text-center">
<h3 id="location-creative">
<span>מועדוני הכושר הולמס פלייס וגו אקטיב כוללים מרחב אימון מפנק ומעל ל100 שיעורי סטודיו בשבוע</span>
</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 text-center">
<h4 id="call-for-action">
<span>לשיעור הכרות והצטרפות השאירו פרטים</span>
</h4>
</div>
</div>
<!-- =============FORM BEGINS HERE -->
<form id="subscribe" class="center-block col-sm-offset-2 form-inline">
<div class="form-group">
<input name="fullName" type="text" class="form-control" placeholder="שם מלא: *" />
</div>
<div class="form-group">
<input type="text" name="phoneNumber" class="form-control" placeholder="טלפון:*" />
</div>
<div class="form-group">
<select name="club" class="form-control">
<option value="none" disabled="" selected="">בחר מועדון</option>
<option disabled="">צפון</option>
<option value="202">חיפה - הולמס פלייס גרנד קניון</option>
<option value="212">חיפה - הולמס פלייס פמילי חיפה</option>
<option value="102">חיפה - הולמס פלייס קניון חיפה</option>
<option value="103">נתניה - הולמס פלייס נתניה</option>
<option value="11">קיסריה - גו אקטיב קיסריה</option>
<option value="104">קריות - הולמס פלייס קיריון</option>
<option disabled="">מרכז</option>
<option value="8">בת ים - גו אקטיב בת ים</option>
<option value="210">גבעת שמואל - הולמס פלייס פמילי גבעת שמואל</option>
<option value="207">גבעתיים - הולמס פלייס גבעתיים</option>
<option value="203">הרצליה - הולמס פלייס הרצליה פיתוח</option>
<option value="117">הרצליה - הולמס פלייס שבעת הכוכבים</option>
<option value="111">מבשרת - הולמס פלייס מבשרת ציון</option>
<option value="206">מודיעין - הולמס פלייס פמילי מודיעין</option>
<option value="13">נס ציונה - גו אקטיב נס ציונה</option>
<option value="105">פ"ת - הולמס פלייס פ"ת</option>
<option value="4">קרית אונו - גו אקטיב קרית אונו</option>
<option value="209">ראש העין - הולמס פלייס פמילי ראש העין</option>
<option value="7">ראשל"צ - גו אקטיב ראשל"צ</option>
<option value="108">ראשל"צ - הולמס פלייס ראשל"צ</option>
<option value="205">רחובות - הולמס פלייס רחובות</option>
<option value="2">רמת גן - גו אקטיב רמת גן</option>
<option value="5">רמת גן - גו אקטיב תל השומר</option>
<option value="216">רמת גן – הולמס פלייס מתחם הבורסה</option>
<option value="106">רעננה - הולמס פלייס רננים</option>
<option value="204">רעננה - הולמס פלייס רעננה</option>
<option value="1">ת"א - גו אקטיב ויצמן</option>
<option value="10">ת"א - גו אקטיב פרו הדר יוסף</option>
<option value="109">ת"א - הולמס פלייס דיזינגוף</option>
<option value="201">ת"א - הולמס פלייס עזריאלי</option>
<option disabled="">דרום</option>
<option value="211">ב"ש - הולמס פלייס ב"ש</option>
</select>
</div>
<input type="submit" class="btn-danger form-control " value="חזרו אליי" />
<div class="form-group">
<input type="checkbox" /><span>אני מעוניין/ת לקבל עדכונים, הטבות ומבצעים מקבוצת הולמס פלייס באמצעות מיילים, מסרונים או כל אמצעי אחר</span>
</div>
</form>
<div class="row">
<div class="col-xs-12 col-sm-4 text-center center-block training-images">
<div class="row">
<div class="col-xs-12 col-sm-12">
<img src="assets/images/gym.png" alt="person running on treadmil" />
<h5><span>חדר כושר מתקדם</span></h5>
<span class="description">מרחב אימון חדשני, מרווח ומאובזר
עם הציוד ברמה הכי גבוהה</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-center center-block training-images">
<div class="row">
<div class="col-xs-12 col-sm-12">
<img src="assets/images/trainer.png" alt="trainer and a trainee" />
<h5><span>5 אימונים אישיים במתנה</span></h5>
<span class="description">רק למצטרפים החודש, אימוניים אישיים מתנה
עם מאמן מוסמך שימקד ויביא אתכם לתוצאות</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-center center-block training-images">
<div class="row">
<div class="col-xs-12 col-sm-12">
<img src="assets/images/classes.png" alt="meditating person" />
<h5><span>מגוון ענק של שיעורי סטודיו</span></h5>
<span class="description">מעל ל-100 שיעורי סטודיו בשבוע
שיכניסו אתכם לשיגרת כושר בריאה ומהנה</span>
</div>
</div>
</div>
</div>
<div class="row">
<div id="locations" class="col-xs-12 col-sm-12 text-center">
<span>
חיפה | כרמיאל | נתניה | רעננה | הרצליה | תל אביב | גבעתיים | פתח תקווה | יהוד | קרית אונו | רמת גן | ראש העין | ראשון לציון | שיבא תל-השומר | רחובות | קיסריה | גבעת שמואל | אשדוד | נס ציונה | מודיעין | מבשרת | באר שבע
</span>
</div>
</div>
<div class="row">
<div id="slogan" class="col-xs-12 col-sm-12">
<img src="assets/images/sloganHolmes.png" class="img-responsive center-block" alt="slogan" />
</div>
</div>
<div class="row">
<div id="conditions" class="col-xs-12 col-sm-12 text-center">
<span>*בהצטרפות למנוי שנתי</span>
<span>*משך האימון 30 דק</span>
<span>*אין החזר כספי על אימוים שלא ממשו</span>
<span>*ההטבה בתוקף עד 30.04.18</span>
<span>*בכפוף לתקנון</span>
</div>
</div>
</div>
<!-- ======LOAD NATIVE JAVASCRIPT FILE -->
<script src="assets/js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
</script>
<script>
nl_lang = "he";
nl_pos = "bl";
nl_link = "0";
nl_color = "blue";
</script>
<script src="assets/js/nagishli2.2/nagishli.js" defer></script>
</body>
</html>
答案 0 :(得分：1)
试试这个
将所有输入包含在一个表单组中，并使类form-horizontal形成并调整一点以符合您的设计要求。
HTML
<form id="subscribe" class="form-horizontal center-block ">
<div class="form-group row">
<div class="col-sm-3">
<input name="fullName" type="text" class="form-control" placeholder="שם מלא: *">
</div>
<div class="col-sm-3">
<input type="text" name="phoneNumber" class="form-control" placeholder="טלפון:*">
</div>
<div class="col-sm-6">
<select name="club" class="form-control">
<option value="none" disabled="" selected="">בחר מועדון</option>
<option disabled="">צפון</option>
<option value="202">חיפה - הולמס פלייס גרנד קניון</option>
<option value="212">חיפה - הולמס פלייס פמילי חיפה</option>
<option value="102">חיפה - הולמס פלייס קניון חיפה</option>
<option value="103">נתניה - הולמס פלייס נתניה</option>
<option value="11">קיסריה - גו אקטיב קיסריה</option>
<option value="104">קריות - הולמס פלייס קיריון</option>
<option disabled="">מרכז</option>
<option value="8">בת ים - גו אקטיב בת ים</option>
<option value="210">גבעת שמואל - הולמס פלייס פמילי גבעת שמואל</option>
<option value="207">גבעתיים - הולמס פלייס גבעתיים</option>
<option value="203">הרצליה - הולמס פלייס הרצליה פיתוח</option>
<option value="117">הרצליה - הולמס פלייס שבעת הכוכבים</option>
<option value="111">מבשרת - הולמס פלייס מבשרת ציון</option>
<option value="206">מודיעין - הולמס פלייס פמילי מודיעין</option>
<option value="13">נס ציונה - גו אקטיב נס ציונה</option>
<option value="105">פ"ת - הולמס פלייס פ"ת</option>
<option value="4">קרית אונו - גו אקטיב קרית אונו</option>
<option value="209">ראש העין - הולמס פלייס פמילי ראש העין</option>
<option value="7">ראשל"צ - גו אקטיב ראשל"צ</option>
<option value="108">ראשל"צ - הולמס פלייס ראשל"צ</option>
<option value="205">רחובות - הולמס פלייס רחובות</option>
<option value="2">רמת גן - גו אקטיב רמת גן</option>
<option value="5">רמת גן - גו אקטיב תל השומר</option>
<option value="216">רמת גן – הולמס פלייס מתחם הבורסה</option>
<option value="106">רעננה - הולמס פלייס רננים</option>
<option value="204">רעננה - הולמס פלייס רעננה</option>
<option value="1">ת"א - גו אקטיב ויצמן</option>
<option value="10">ת"א - גו אקטיב פרו הדר יוסף</option>
<option value="109">ת"א - הולמס פלייס דיזינגוף</option>
<option value="201">ת"א - הולמס פלייס עזריאלי</option>
<option disabled="">דרום</option>
<option value="211">ב"ש - הולמס פלייס ב"ש</option>
</select>
</div>
</div>
<input type="submit" class="btn-danger form-control " value="חזרו אליי" disabled="">
<div class="form-group">
<input type="checkbox"><span>אני מעוניין/ת לקבל עדכונים, הטבות ומבצעים מקבוצת הולמס פלייס באמצעות מיילים, מסרונים או כל אמצעי אחר</span>
</div>
</form>
CSS
#subscribe {
max-width: 767px;
}
input[type="submit"] {
width: auto;
}