配售圖像格式旁邊（帶行）

這裏是我打算：

代碼：

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

是的，我不完全清楚行的跨度。但是，這已經清除了很多。謝謝！ –

很高興幫助。如果某些答案對你有用，你可以留下一個贊成票，如果你解決了你的問題，你應該標記它。 –

配售圖像格式旁邊（帶行）

回答

相關問題