Tôi đang phát triển một biểu mẫu trong Bootstrap 3 để có một loạt các điều khiển văn bản và hình ảnh. Biểu mẫu chiếm 100% vùng chứa của nó và đầu vào văn bản cũng được đặt thành chiều rộng 100%. Điều này hoạt động tốt khi tôi không phải lo lắng về một hình ảnh. Tôi sử dụng bootstrap .form-control và .form-horizontal lớp học để làm cho nó hoạt (mã ở phía dưới):Tự động thay đổi kích thước các phần của div tùy thuộc vào chiều rộng của hình ảnh?
Look Current
tôi cần phải đưa hình ảnh ở bên phải của những hình thức kiểm soát và giảm chiều rộng của họ một cách thích hợp:
Mockup
Tôi chỉ cần đặt trong một cột khác trong hệ thống lưới của Bootstrap để xử lý, nhưng tôi cũng muốn các cột quay lại với chiều rộng đầy đủ khi hình ảnh được thực hiện, như minh họa trong hình ảnh mô phỏng ở trên. Tương tự như bố cục hình ảnh "chặt chẽ" trong Microsoft Word. Tôi đã thử đặt float:right; và display:inline-block' đến lớp hình ảnh nhưng nó không bật ra một cách chính xác:
không làm việc Tuy
Bất cứ ai cũng biết làm thế nào để làm cho công việc thiết kế như thế nào tôi mô tả nó trong mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>Hiệu quả cụ thể tôi sẽ cho là phải có đầu vào bên dưới hình ảnh mở rộng ra đến 100% nữa. Như thế này:
Tôi biết rằng hình ảnh có thể được lưu hành nhưng tôi không muốn tất cả các đầu vào bên dưới nó ở chiều rộng tương tự như những người trên đường với hình ảnh. Tôi muốn họ mở rộng.
Đặt hình ảnh như đúng phao và thêm một số đệm với nó. Không sử dụng inline-block cho điều đó. – frenchie
Tôi đề nghị bạn cung cấp một fiddle –
Đã thêm! http://jsbin.com/neqosoduqe/1/edit –