配售图像格式旁边（带行）

这里是我打算：

代码：

<!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>

Demo fiddle

我试图将图像放在我的表格旁边，如图1所示。

我试过各种方法：即。列内的列，流体容器等。使用这些方法导致文本框越来越短，表单和图像之间的边距变得更大。

看来这行拿起容器和宽度的100％的宽度不能使用CSS

如何做到这一点任何想法有所调整？

此外，我会如何居中表格？似乎也不能这样做也使用与其他元素一起使用的方法

来源

2016-11-11 John Tickle

可能无关：您有几个额外的结束div标签。 – isherwood

啊是的。我在那里编辑过，现在应该没问题。刚从一个项目中复制了一段代码并粗略地编辑了它。是的，我没有把图像放在上面的代码中。每个我已经放置图像代码的实现已经搞乱了文本框的宽度。 –

你还没有添加工作jsfiddle链接。 – frnt

你只需要一个嵌套的行结构。外部列是表单结构和图像的包装器。包含表单内列自己添加多达12

Fiddle

请注意，我已经转换所有列XS的演示，而且这两个短的人不适合在良好小屏幕尺寸。

.row > div { 
 
    margin: 5px 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>  
 

 
<div class="container"> 
 
    <div class="jumbotron text-center"> 
 
     <h2>Form</h2> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-8"> 
 
      <form> 
 
       <div class="row"> 
 
        <div class="col-xs-6"> 
 
         <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-xs-6"> 
 
         <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-xs-3"> 
 
         <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-xs-3"> 
 
         <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-xs-6"> 
 
         <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-xs-6"> 
 
         <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-xs-12"> 
 
         <textarea class="form-control" rows="3" placeholder="Additional comments"></textarea> 
 
        </div> 
 
       </div> 
 

 
       <div class="row"> 
 
        <div class="col-xs-2"> 
 
         <button type="button" class="btn btn-default btn-lg">Submit</button> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
      <img class="img-responsive" src="http://placehold.it/800x600" /> 
 
     </div> 
 
    </div> 
 
</div>

来源

2016-11-11 14:55:44 isherwood

太棒了。谢谢！嗯，我要让图像只能从MD屏幕向上看。在这种情况下，我仍然可以使用md列吗？ –

当然。同样使用'hide'和/或'show'类。 – isherwood

请提出所有有用的答案，并接受一个，如果它满足您的需求。 SO运行在代表点上。 – isherwood

您应该使用引导的网格类和除以你的<form>部分和图像部分分为两个部分。

看看这个Codepen。

希望这会有所帮助！

来源

2016-11-11 14:58:54

我一定会更多地关注它。非常感谢！我会在一段时间内讨论网格类。 –

@JohnTickle当然。如果您遇到任何其他问题，请告知我。如果你认为它适合你，那么你可以接受答案。 –

我让你在这里fiddle working。

.jumbotron { 
 
    margin-top: 20px; 
 
} 
 

 
.input-group, 
 
textarea { 
 
    margin-bottom: 10px; 
 
} 
 

 
img{width:100%}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 

 
    <div class="container"> 
 
    <div class="jumbotron text-center"> 
 
     <h2>Form</h2> 
 
    </div> 
 

 
    <form> 
 
     <div class="row"> 
 

 

 
     <div class="col-md-9"> 
 

 

 

 
      <div class="row"> 
 
      <div class="col-md-6"> 
 
       <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-6"> 
 
       <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-3"> 
 
       <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-3"> 
 
       <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-6"> 
 
       <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-6"> 
 
       <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-12"> 
 
       <textarea class="form-control" rows="3" placeholder="Additional comments"></textarea> 
 
      </div> 
 
      </div> 
 

 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <button type="button" class="btn btn-default btn-lg">Submit</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img src="http://txtbits.com/wp-content/uploads/2015/07/bootstrap.png"> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div>

这里的事情是，你应该明白，引导使用由12列所做的网格系统。当你声明一行时，你必须记住它有12个空白来填充你的列。

要实现一个像你的布局，你不应该尝试去适应一个元素，比如你的图像，它需要多行高度。尽管如此，最好创建两列，一列用于输入，另一列用于图像。然后，在填写栏内，根据需要添加尽可能多的行，然后填写必要的栏，始终牢记必须填写12个空白处。

来源

2016-11-11 15:05:05

是的，我不完全清楚行的跨度。但是，这已经清除了很多。谢谢！ –

很高兴帮助。如果某些答案对你有用，你可以留下一个赞成票，如果你解决了你的问题，你应该标记它。 –

配售图像格式旁边（带行）

回答

相关问题