2
注：ここでは、ブートストラップ（行で）フォームの横に画像を配置
を使用するには、私がつもりです： 
コード：
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<style>
.jumbotron
{
margin-top: 20px;
}
.input-group, textarea
{
margin-bottom: 10px;
}
</style>
<body>
<div class = "container">
<div class = "jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-8">
<textarea class="form-control" rows="3" placeholder = "Additional comments"></textarea>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
I図1に示すように、私のフォームの横に画像を配置しようとしています。
私はさまざまな方法で試しました。列内の列、流体容器など これらの方法を使用すると、テキストボックスが小さくなり、フォームとイメージの間に大きなマージンが生じます。
行がCSS
これを行う方法上の任意のアイデアを使用することによって調整することができないコンテナと幅の100％の幅を取るようですか？
また、どのようにフォームを中央に配置しますか？他の要素でも動作するメソッドを使ってもやっているようには見えません。
おそらく関連性がありません：閉じたdivタグがいくつか追加されています。 – isherwood
ああ、そうです。私はそれを編集しました、今は大丈夫でしょう。ちょうどプロジェクトからスニペットをコピーし、それを大まかに編集しました。うん、私は上記のコードの画像を入れていない。私が画像コードを置いたすべての実装は、テキストボックスの幅を乱してしまいました。 –
あなたは作業中のリンクを追加していません。 – frnt